Angular Iv，下一代编译 & 渲染工具！
Angular Ivy是Angular的下一代编译和渲染工具，它带来了速度和大小方面的改进。Ivy是Angular下一代编译和渲染的代号。它提高了构建代码的速度和大小等。Ivy从Angular框架的第9版就开始使用了。
在本文中，我们将看到Angular Ivy为Angular项目带来的改进。
Kendo UI for Angular是专用于Angular开发的专业级Angular组件，telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。
Telerik_KendoUI产品技术交流群：726377843 欢迎一起进群讨论
Angular Ivy意味着更小的应用
Angular Ivy编译的应用比上一代Angular编译器要小。
与 Angular 8 编译器相比，小型应用程序要小 30%。与 Angular 8 相比，大型应用程序要小 25-40%。
更快，更有效的测试
使用Ivy运行测试速度更快，因为所有测试都可以在第一次编译之后运行。
在Ivy之前，每次运行测试时，都必须事先编译项目。编译过程大大延迟了Ivy之前的测试时间。
调试工具
在Ivy中，ng可使用全局变量。
它使我们只需要通过在浏览器开发控制台中输入变量的属性来访问Angular组件的各个部分。我们不再需要插入不必要的console.log调用或断点来调试Angular应用。
ng仅在开发模式下可用。因此，外部人员不能使用生产版本访问ng。
例如，我们输入:
const el = document.querySelector("app-root");
进入浏览器控制台，获取Angular组件的元素。
然后输入:
ng.getComponent(el);
获取el元素对应的Angular组件实例。
我们还可以输入:
ng.getDirectives(el);
获取添加到组件中的指令，el元素将从中呈现。
我们可以运行:
ng.applyChanges(el);
在el从中呈现的组件上运行变更检测。
ng从Angular的第一个版本开始就已经可用了。但是，使用Ivy，我们可以直接获得变量的值。
其他ng方法包括:
- ng.getContext:获取嵌入视图的上下文，比如由*ngIf或*ngFor渲染的元素。
- ng.getDirectiveMetadata:获取特定指令的元数据。
- ng.getHostElement:获取组件或指令实例的宿主元素
- ng.getInjector:获取与元素、组件或指令实例相关联的注入器
- ng.getListeners:获取与组件呈现的元素相关联的事件侦听器。此方法不会返回主机侦听器
- ng.getOwningComponent:获取包含DOM元素的组件
- ng.getRootComponents:获取与DOM元素相关的所有根元素
列出的所有方法都以一个DOM元素作为参数。
改进风格合并和处理
明确的优先顺序决定了样式规则如何应用于Ivy编译器。
例如，[样式。Color]颜色样式覆盖在其他地方设置的颜色样式。
以前的编译器版本使用样式应用程序的计时来确定最新的样式，并且没有应用样式的一致规则。这可能会导致问题，因为不同的时间可以应用不同的样式。
延迟加载
延迟加载意味着只加载屏幕上显示的内容，并且在显示元素之前完成。
这提高了渲染性能，因为只加载应用程序中显示给用户的部分，而不是加载整个应用程序，这可能会非常大。
改进的AOT编译
AOT编译代表提前编译。Ivy编译器默认为AOT，因为它现在比以前版本中使用的即时编译器更快。
模板类型检查
在Ivy之前，组件模板几乎没有类型检查。
使用Ivy，在构建时检查组件数据类型，以查看模板中的组件数据类型是否与声明的数据类型匹配。
fullTemplateTypeCheck控制模板是否启用了数据类型检查。这在默认情况下是正确的。
例如，如果我们将一个数字赋值给模板中的boolean变量，我们将从Ivy编译器获得一个错误。
举一个示例:
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title: string = "angular-test";
}
写入：
app.component.html
<button (click)="title = 123">click me</button>
我们会得到一个类型错误，因为title应该是字符串。
重建时期
使用Ivy，重新构建过程变得更加高效，因为它只查看已更改的公共api并重新构建它们。在艾薇之前，任何改变都会引发重建。
组件、指令、模块等内部细节的改变不会影响构建。
全球化
全球化特性也在Ivy中得到了改进。Ivy允许我们在运行时加载全球化特性，而不必在编译时注册它们。此外，多种语言可以内置到同一个应用程序包中，而不必将它们分开。
要在应用中添加本地化特性，我们需要添加@angular/ localalize包。
运行:
ng add @angular/localize
按照说明添加包及其依赖项。将添加依赖项所需的导入。
然后我们写:
main.ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import { loadTranslations } from "@angular/localize";
import "@angular/localize/init";
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
loadTranslations({
Welcome: "Welcome to {$appName}.",
});
用带有翻译的对象调用loadTranslations来加载翻译。
然后使用$ localalize标签:
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title: string = "test";
welcome: string = $localize`Welcome to ${this.title}.`;
}
在Welcome to ${this.title}上调用$ localalize字符串在app.component.html中，写入:
{{welcome}}
显示信息
loadTranslations在运行时用Ivy编译时加载翻译，因此减少了初始加载期间需要加载的数据量。
