Angular模板是如何构建DOM树的机制是什么？

本文共计856个文字，预计阅读时间需要4分钟。

Angular等现代Web框架极大地提高了开发效率，例如，我们经常会在开发过程中写出类似以下代码：

{{title}}

export class AppComponent { title='angular';}

这种模板语法并非HTML原生支持的，那那指的是Angular的双向数据绑定功能，允许开发者以更简洁的方式构建动态界面。

Angular等现代Web框架极大的提高了开发效率,比如我们经常会在开发过程中写出类似下面的代码：

<div> {{title}} </div> export class AppComponent { title = 'angular'; }

这种模板写法并不是HTML原生支持的，那么Angular又是如何转换这些代码，并显示成我们期望的界面呢? 首先我们来看看Angular把上述代码编译成什么样子：

...省略了其他代码 i0.ɵɵelementStart(0, "div"); i0.ɵɵtext(1, " hello angular\n"); i0.ɵɵelementEnd() ...省略了其他代码

可以看到，Angular把我们写的模板编译成指令的方式,然后通过这些指令生成对应的HTML.这个过程包含两个步骤：

1. 把模板编译成上面的产物
2. 执行产物代码生成HTML

本文主要围绕步骤二进行展开，步骤一的话可能会在后续另写一篇进行阐述。