最近在寫一個日期選擇器組件，為了滿足將來可能出現(xiàn)的各種需求，所以需要能夠高度的自定義組件的樣式。為了達(dá)到這個目的，需要能夠在日期選擇器組件外控制每個日期格子內(nèi)要顯示的內(nèi)容，比如，標(biāo)上節(jié)假日之類的。這時候，組件的一部分模板就需要由調(diào)用方提供。

在 React 里面，這種需求挺簡單的，只要實現(xiàn)一個 date => Element 這樣的函數(shù)就好了，但是 Angular 模板是純粹的模板，需要使用一些專門的概念才能實現(xiàn)這個功能。

第一種方式 <ng-content>

<ng-content> 這個標(biāo)簽到本文撰寫時為止，還沒有官方的文檔，甚至連占位符都沒有。但是這并不妨礙我們的使用，外國熱心網(wǎng)友已經(jīng)總結(jié)出了 <ng-content> 在現(xiàn)階段的特點與作用。

基本用法

<!-- Wrapper.Component.html --><div>  hello  <ng-content></ng-content></div>

假設(shè)我們有一個上述的組件，然后向下面這樣調(diào)用：

<wrapper>  <span> World </span></wrapper>

那么最終的渲染結(jié)果將會是這樣的：

<div>  hello  <span> World </span></div>

看起來就是發(fā)生了很簡單的替換，但是如果在 Wrapper 中出現(xiàn)了多個 <ng-content> 會出現(xiàn)多個 <span> World </span> 嗎？答案是不會的。<ng-content> 的本質(zhì)只是移動元素，并不會去自動的創(chuàng)建傳入的模板，所以就算用 ngFor 套住 <ng-content> 也不會出現(xiàn)很多個 <span> World </span>。如果傳入的是自定義的組件，這些組件也只會被實例化一次。

進階用法

當(dāng)然，如果 <ng-content> 的功能僅僅只是這樣就顯得太雞肋了，在使用 <ng-content> 的時候可以指定一個選擇器，這個選擇器可以捕獲相符的直接子元素。例如：

<!-- Wrapper.Component.html --><div>  hello  <ng-content></ng-content>  <hr/>  <ng-content select="span"></ng-content></div>

然后像下面這樣使用：

<wrapper>  <span> World </span>  2333</wrapper>

最終的渲染結(jié)果將會是這樣：

<div>  hello  2333  <hr/>  <span> World </span></div>

除了設(shè)置 ng-content 標(biāo)簽的 select 屬性之外，還可以在子元素上使用 ngProjectAs 屬性，這個屬性可以讓這個元素被父元素中指定的 ng-content 所捕獲。舉個例子：

<wrapper>  <div ngProjectAs="span"> World </div>  2333</wrapper>

這次被傳入的模板變成了一個 div，但是因為設(shè)置了 ngProjectAs，所以“World”會出現(xiàn)在分割線下方。