接下來要介紹Component包含Child Component時相關操作的Lifecycle hook

這些hook method，只對Component有效，不能使用在Directive

AfterContent

content projection

content projection是從Component外部導入HTML內容，

並把它插入到Component Template中指定的位置。

有開發過ng1的人會知道這個作法如同transclusion

使用語法如下

 <my-component>
   <div class="card-block">Class Selector Child</div>
   <tag-child-component>Tag Selector Child</tag-child-component>
   <div name="attr-child-component">Attribute Selector Child</div>
   <div class="card-block card-body">...</div>
   <div class="card-block" body card>...</div>
 </my-component>`

  <div>
      <h3>My Component</h3>
      <ng-contnent select=".class-child-component"></ng-contnent>
      <ng-contnent select="tag-child-component"></ng-contnent>
      <ng-contnent select="[name='attr-child-component']"></ng-contnent>
      <ng-content select=".card-block.card-body"></ng-content>
      <ng-content select="[card][body]"></ng-content>
  </div>

AfterContentInit

ngAfterContnentInit：當content投射到元件內之後觸發

AfterContentChecked

ngAfterContentChecked：當被投射到元件的cotnent有變動時觸發

AfterView

元件HTML模版使用子元件來呈現內容

    <my-parent>
        <my-child>...</my-child>
    </my-parent>

所以我們可以發現，AfterView和AfterContent不同點是使用的內部組件類型不同。

AfterView關心的是ViewChildren，所以子元件的tag會出現在元件的模版裡。

AfterContent關心的是ContentChildren，所使用的HTML內容會被ng投射至元件的模版裡。

AfterViewInit

ngAfterViewInit：當元件及子元件的View都Render完成之後觸發

AfterViewChecked

ngAfterViewInit：當元件及子元件有變動時觸發

AfterView與AfterContent的先後順序

ng會先執行AfterContent hook才會執行AfterView hook

也就是說ng在把子元件的內容render並加入至元件前

會先把content projection完成