Angular Iv，下一代编译 & 渲染工具！

Angular Ivy是Angular的下一代编译和渲染工具，它带来了速度和大小方面的改进。Ivy是Angular下一代编译和渲染的代号。它提高了构建代码的速度和大小等。Ivy从Angular框架的第9版就开始使用了。

在本文中，我们将看到Angular Ivy为Angular项目带来的改进。

Kendo UI for Angular是专用于Angular开发的专业级Angular组件，telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。

Kendo UI R1 2023正式版下载

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编译时加载翻译，因此减少了初始加载期间需要加载的数据量。

了解最新Kendo UI最新资讯，请关注Telerik中文网！