Angular 18 引入了 Zoneless 变更检测

Angular 最近发布了 Angular 18，引入了 zoneless（无 zone.js）变更检测、新的开发者中心、多个特性的稳定版本以及服务器端渲染的改进等。该版本的亮点是提供了稳定的新 API，解决了常见的开发者请求，并增强了整体的开发者体验。

Angular 18 引入了对 zoneless 变更检测的实验性支持，消除了对 zone.js 的需求。该方法旨在通过减少变更检测的周期数以及提供更易读的堆栈跟踪来提高性能。开发人员可以通过在其应用程序的引导程序中添加如下的提供程序来尝试实验性的 zoneless 支持：

bootstrapApplication(App, {  providers: [    provideExperimentalZonelessChangeDetection()  ]});

谷歌高级软件工程师 Alex Rickabaugh 在 X（前身名为 Twitter）上发表的推文谈到了在 Angular 18 中支持 zoneless 的重要性：

我对这个版本的发布感到特别的自豪。我们面临的最大挑战是在保持 Angular 的稳定性和可靠性的同时跟上现代 Web 的发展。借助 v18，我们朝着没有 zone.js 的未来迈出了第一步。

Angular.dev 是 Angular 文档的官方网站。其中包含了动手入门之旅、互动游乐场、更新的指南和简化的导航。所有对 angular.io 的请求现在都重定向到了 angular.dev。

在 Angular 18 中有几个特性已经达到了稳定状态。之前处于实验性支持状态的 Material 3 组件现已稳定，并包括了新的主题和文档。旨在改进 Core Web Vitals 的可延迟视图现在处于稳定状态，使开发人员能够延迟加载某些视图。新的内置控制流语法和特性也已达到稳定状态，可提供改进的性能和人效学的优势。

Angular 18 通过 i18n hydration 支持、更好的调试和由谷歌事件调度库提供的事件回放增强了服务器端渲染（SSR）。这些改进旨在确保服务器端渲染体验更加健壮并且更具交互性。

现在可以在 Angular 18 中为 ng-content 指定默认的内容。这允许开发人员在他们的组件中提供回退内容。例如：

@Component({  selector: 'app-profile',  template: `    Hello     Unknown user  `,})export class Profile {}

使用组件：

<app-profile>  <span class="greeting">Good morning </span></app-profile>

输出将会是：

<span class="greeting">Good morning </span>Unknown user

Angular 表单现在公开了一个名为 events 的属性，允许开发人员订阅表单控件的事件流。例如：

const nameControl = new FormControl('name', Validators.required);nameControl.events.subscribe(event => {  // 处理单个事件});

此外，Angular 18 通过允许使用返回动态重定向路由的函数，在路由重定向方面提供了更高的灵活性。例如：

const routes: Routes = [  { path: "first-component", component: FirstComponent },  {    path: "old-user-page",    redirectTo: ({ queryParams }) => {      const errorHandler = inject(ErrorHandler);      const userIdParam = queryParams['userId'];      if (userIdParam !== undefined) {        return `/user/${userIdParam}`;      } else {        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));        return `/not-found`;      }    },  },  { path: "user/:userId", component: OtherComponent },];

最后，Angular 18 更新了对 TypeScript 5.4 的依赖，使开发人员能够利用最新的 TypeScript 特性和改进。

原文链接：

https://www.infoq.com/news/2024/07/angular-18-introduces-zoneless/

声明：本文由 InfoQ 翻译，未经许可禁止转载。