Angular 18 引入无区域变更检测

Angular 18 发布概述

Angular 团队近日发布了 Angular 18，带来了多项新功能和改进，包括无区域（zoneless）变更检测、新的开发者中心、多个功能的稳定版本、服务器端渲染（SSR）优化等。此版本旨在稳定新 API、满足开发者常见需求，并提升整体开发体验。

无区域变更检测

Angular 18 引入了实验性支持的无区域变更检测，消除了对 zone.js 的依赖。这一改进旨在通过减少变更检测周期和提高堆栈跟踪的可读性来提升性能。开发者可以通过以下方式启用实验性无区域支持：

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

Google 的高级软件工程师 Alex Rickabaugh 在 X（原 Twitter）上强调了无区域支持的重要性，称这是 Angular 迈向无 zone.js 未来的第一步。

新的开发者中心：Angular.dev

Angular.dev 是 Angular 官方文档的新站点，提供了交互式学习旅程、互动式演练、更新后的指南以及简化的导航。所有对 angular.io 的请求现在都会被重定向到 angular.dev。

稳定功能

Angular 18 中，多个功能达到稳定状态：

Material 3 组件：之前处于实验性支持状态，现已稳定，并包含新主题和文档。
延迟视图（Deferrable Views）：旨在提升 Core Web Vitals，现稳定，允许开发者延迟加载某些视图。
内置控制流语法：现稳定，提供更好的性能和开发体验。

服务器端渲染（SSR）改进

Angular 18 增强了 SSR 功能，包括对 i18n 水合的支持、更好的调试能力，以及基于 Google 事件调度库的事件重放。这些改进旨在提供更强大和互动的 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 },
];

TypeScript 5.4 更新

Angular 18 将依赖的 TypeScript 版本更新至 5.4，使开发者能够利用最新的 TypeScript 功能和改进。

总结

Angular 18 通过引入无区域变更检测、稳定多个功能、增强 SSR 和提供新的开发者中心，显著提升了开发体验和性能。这些改进展示了 Angular 在保持稳定性和可靠性的同时，不断适应现代 Web 开发需求的努力。