写点什么

Angular 18 引入了 Zoneless 变更检测

Agazi Mekonnen

  • 2024-07-16
    北京
  • 本文字数:1417 字

    阅读完需:约 5 分钟

大小:450.71K时长:02:33
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 翻译,未经许可禁止转载。

2024-07-16 10:006414

评论

发布
暂无评论
发现更多内容

影视解说类自媒体如何才能求同存异

石头IT视角

架构实战营模块2-微信朋友圈分析

Geek_e8bfe4

继StepN后,新的链游之光

BlockChain先知

CopyOnWriteArrayList 源码分析-基础和新增

zarmnosaj

5月月更

【架构训练营】模块二作业

知北游

作业

模块二作业 微信朋友圈高性能分析

Geek__猫猫头

聊聊 Kafka:Kafka 如何保证可靠性

老周聊架构

kafka 5月月更

前端食堂技术周刊第 39 期:TypeScript 4.7、Layouts RFC、Lerna 复活后的大版本 v5.0.0 、TypeScript 错误翻译器

童欧巴

JavaScript typescript 前端

从发电到深空探索:微藻带来的可持续未来

脑极体

6点下班不是梦,Apipost帮您轻松完成接口测试及接口文档

Xd

接口测试 apipost

electron打包vue cli项目的配置问题

空城机

Electron 5月月更

架构实战营 模块二作业(微信朋友圈高性能复杂度分析)

Gor

在线HTML转ASP工具

入门小站

工具

网站建设导致网站失败的十个原因

源字节1号

微信小程序 前端开发 后端开发 网站开发

【LeetCode】判断一个数的数字计数是否等于数位的值Java题解

Albert

LeetCode 5月月更

微信朋友圈的高性能复杂度分析

Asura

如何抓住架构设计关键 - 作业

阿拉阿拉幽幽

在线下划线转驼峰,驼峰转下划线工具

入门小站

工具

【愚公系列】2022年05月 二十三种设计模式(十八)-备忘录模式(Memento Pattern)

愚公搬代码

5月月更

2.5TinkerPop3 升级指南

Geek_古藤模根

图数据库实战

Apipost——中文版的Postman?

Xd

API 接口测试工具

微信朋友圈的高性能复杂度架构

Pengfei

Vue框架学习笔记【第day三】

恒山其若陋兮

5月月更

【愚公系列】2022年05月 二十三种设计模式(十七)-中介者模式(Mediator Pattern)

愚公搬代码

5月月更

架构实战营-模块二作业

Roy

架构实战营

架构实战营模块 2 作业

Naoki

架构实战营

如何系统学习机器学习?

宇宙之一粟

机器学习 5月月更

架构实战营|模块2

KDA

#架构实战营

要自信的对客户说 “NO”

源字节1号

CPU性能测试工具

穿过生命散发芬芳

5月月更 CPU性能测试

[模块二作业]

wuli洋

Angular 18 引入了 Zoneless 变更检测_后端_InfoQ精选文章