Angular4學習筆記（八）- ng-content

內容投影

ng-content

ng-content是一個佔位符，有些相似於router-outlet。

之前舉の例子，父組件包含子組件都是直接指明子組件的selector，好比子組件的selector叫app-child，那麼嵌入父組件時直接指明便可:

<app-child></app-child>

這是很硬性的編碼，而ng-content就是用來替代這種硬性編碼的。

好比有個父組件這樣定義：

@Component({
  selector: 'app-parent',
  template: `
    <p>Parent Component</p>
    <div style="background: cyan">
      <ng-content></ng-content>
    </div>
  `
})

它表示被放進的內容的背景色統一設置爲cyan。

接下來就要將子組件放入父組件中，放置的方式很簡單，在根組件中將app-child插入到app-parent中便可：

<app-parent>
    <app-child></app-child>
</app-parent>

多個投影

上例中只有一個投影，那麼多個投影怎麼辦呢？<ng-content> 支持一個 select 屬性，能夠讓你在特定的地方投射具體的內容。該屬性支持 CSS 選擇器（my-element，.my-class，[my-attribute]，...）來匹配你想要的內容。若是 ng-content 上沒有設置 select 屬性，它將接收所有內容，或接收不匹配任何其餘 ng-content 元素的內容。

好比父組件上有兩個可投影的位置，一個背景爲淺綠，一個爲粉紅：

<div style="background: cyan">
      <ng-content select="[name=child]"></ng-content>
    </div>
    <div style="background: pink">
      <ng-content select=".red"></ng-content>
    </div>

此時能夠在根組件上定義以下：

<app-parent>
      <app-child class="red"></app-child>
      <app-child name="child"></app-child>
    </app-parent>

這樣就能夠對號入座了！

ContentChild

理解了ng-content就能夠使用@ContentChild裝飾器來調用投影內容了，它和@ViewChild很是相似，就很少作介紹了，其異同點列舉以下：

相同點

• 都是屬性裝飾器
• 都有對應的複數形式裝飾器：ContentChildren、ViewChildren
• 都支持 Type |Function|string 類型的選擇器

不一樣點

• ContentChild 用來從經過 Content Projection 方式 (ng-content) 設置的視圖中獲取匹配的元素
• ViewChild 用來從模板視圖中獲取匹配的元素
• 在父組件的 ngAfterContentInit 生命週期鉤子中才能成功獲取經過 ContentChild 查詢的元素
• 在父組件的 ngAfterViewInit 生命週期鉤子中才能成功獲取經過 ViewChild 查詢的元素

參考

• ng-content 中隱藏的內容
• Angular 2 ContentChild & ContentChildren