Angular 組件知識要點

今天去深圳書城了，看到Anuglar2 實戰這本書，就翻了翻組件這一章，滿滿的乾貨，把組件的重要知識點都羅列到了，因而我拍了許多圖片回來，現把這些要點作個彙總！

1、Input和 Output

• Input：傳入值到子組件內      Output： 從子組件向父組件通知事件
• 父到子單向傳值，待深究！
  
• 輸入值變化時，子組件如何響應：  一是 set 方法， 二是 ngOnChanges （見深究，只有綁定一個新對象時，才能監聽到）
  
• Output 事件是EventEmitter對象，是Rxjs中，Subject的一個子類，即能監聽，又能訂閱。
  
• Output事件只傳播到父組件，不會冒泡, 想冒泡要用原生事件,見圖片
  
• 自定義Output事件的別名。  好比我就喜歡用  onClose 這種名稱，可是TSLint會提示不要用on打頭的事件名稱，緣由多是防止和原生的衝突吧。
  

 

2、組件間交互

• 中介模式：若是兩個組件是兄弟組件時，能夠經過父組件中的方法，屬性實現交互。  這個是最天然的方式，說出來有點顯得多餘同樣。
  
• 若是組件沒有共同父組件，則用中介服務。注入服務這個確定是行的通的，由於它是全局的嘛！
  
• 父組件直接操做子組件  ，使用 ViewChild  ，特別注意，是在ngAfterViewInit()  事件中使用的。
    
• 深層次理解，調用子組件的方法時，不要修改UI的操做。我彷佛遇到過一次這個報錯
  

3、內容投影  ngContent

• 書寫的位置： 子組件中寫 ng-content    父組件寫投影的實際內容。  實際內容的上下文實際是父組件
  
• 父組件的樣式影響不到子組件中。不管是Native 仍是 Emulated ，Angular會處理好這個事情！
  
• 子組件有多個投影點， 在ng-content　中添加selector屬性來選擇須要投影的內容
  

4、組件生命週期

• 生命週期圖 。 要在ngOnInit中，組件的屬性才能初始化完畢。另外是建立組件時，先初始化當前組件的子組件，以後纔是初始化本身
    
• 構造函數中，不能訪問Input屬性，不要寫耗時的同步函數，要保持快速
  
• 變動檢測的兩個方式，  default 和 onPush。 變動檢測只是把屬性值==》UI界面上，它不會主動修改組件的屬性。
  
• OnPush 的策略 ，減小一些更新！ 我感受大多數狀況都能用它吧！
  

5、後記

其實這章還有一點遺漏： ng-template的知識點沒講到，算是遺憾！

本書打印有多處錯誤，校對太不稱職了，書中有幾處寫，「見xxx節，  見代碼xx-xx  」，但找過去，徹底沒有這一節內容或這一行代碼， 甚至第6章寫着見第5章的xx代碼，實際是錯誤的。

 

6、深究傳值

一、父組件中，建立一個簡單值和對象值兩個屬性，綁定到子組件的兩個@Input 屬性！

而後在父子組件分別建立一個函數修改它們中的屬性

方式	函數修改屬性時	方向	描述
簡單值綁定	新值	單向	子組件中變化了，父組件不響應的	父變則子響應更新（綁定了嘛）
對象值綁定	生成一個新的對象	單向	同上	同上
對象值綁定	修改當前對象的屬性	雙向	子組件變化，父組件響應	子組件變化，  父組件跟着變

這充分說明：  父組件把屬性傳遞給子組件時， 把屬性自身傳遞過去了，此時父子聯動的！  除非你從新生成對象，就斷開鏈接了，此時屬性就隻影響本身的視圖了。