Angular 組件通信、生命週期鉤子 小結

 

本文爲原創，轉載請註明出處： cnzt       文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/7986858.html

http://www.cnblogs.com/zt-blog/p/7986858.html

 

組件接受參數：

1. 路由查詢參數（ActivatedRoute：參數鏡像、參數訂閱兩種方式）

2. Input傳參（單向）

鉤子： ngOnChange

 

組件間通信：

1. Input傳參（單向） 父 --> 子

2. Output傳參（單向） 子 --> 父

3. 中間人（父組件/服務做爲他的子組件們的中間人） 兄弟 <--> 兄弟

   通常是用服務來作中間人的，而不經常使用父組件！

4. 模板引用變量（也稱模板本地變量）  -- 父組件調用自組建

　　父模板中調用子組件的屬性、方法： #name

　　父組件中調用子組件的屬性、方法： @ViewChild()

 

　　鉤子： ngAfterViewInit   ngAfterViewChecked

5. 內容投影： 子組件中經過ng-content指令投影父組件的內容，父組件能夠向投影的內容綁定本身的屬性。

　　注： 被投影的片斷不能使用子組件的屬性，只能使用父組件的屬性！

 

鉤子： 下面是按執行順序

Constructor

ngOnChanges  @Input

ngOnInit

ngDoCheck 變動檢測

 

ngAfterContentInit    相關：子組件中經過ng-content指令投影父組件的內容。

ngAfterContentChecked

  ------ 子組件的上面六個鉤子執行，直到沒有自組件了 -----

ngAfterViewInit

ngAfterViewChecked

 

ngOnDestroy   跳轉到新路由時，舊路由對應的組件被銷燬。

 

 

其餘：

ng-content 和 [innnerHTML] 都能綁定html內容，區別是：

1. ng-content是平臺無關的，[innnerHTML] 只能用於瀏覽器平臺

2. ng-content能夠綁定多個內容片斷，[innnerHTML] 只能綁定一個。

3. ng-content只能使用父組件的屬性，[innnerHTML] 只能使用子組件的屬性。