天天看點

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 指令的工作原理

繼續閱讀