天天看点

Angular ngIf 指令的工作原理

Represents a container where one or more views can be attached to a component.

Can contain host views (created by instantiating a

component with the createComponent() method), and embedded views

(created by instantiating a TemplateRef with the createEmbeddedView() method).

A view container instance can contain other view containers,

creating a view hierarchy.

@see ComponentRef

@see EmbeddedViewRef

@publicApi

@abstract

*/

class ViewContainerRef {

}

ViewContainerRef可以包含Host view和embedded view.

给原型链上设置函数,都是空的实现:

Angular ngIf 指令的工作原理

执行template函数:

Angular ngIf 指令的工作原理

调用NgIf_Factory工厂函数:

Angular ngIf 指令的工作原理

NgIf构造函数里两个参数,应用开发人员可以直接使用:

Angular ngIf 指令的工作原理

第二次进入到executeTemplate方法:

Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理

在此处绘制视图:

Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理

最后的comment节点,值从container变成了如下的注释:

Angular ngIf 指令的工作原理

而一开头发现的comment节点,是什么时候创建的?

Angular ngIf 指令的工作原理

这个container的值什么时候被替换的?

Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理
Angular ngIf 指令的工作原理

继续阅读