最近在寫一個日期選擇器組件，為了滿足將來可能出現的各種需求，所以需要能夠高度的自定義組件的樣式。為了達到這個目的，需要能夠在日期選擇器組件外控制每個日期格子內要顯示的內容，比如，標上節假日之類的。這時候，組件的一部分模板就需要由調用方提供。
在 React 里面，這種需求挺簡單的，只要實現一個 date => Element 這樣的函數就好了，但是 Angular 模板是純粹的模板，需要使用一些專門的概念才能實現這個功能。
第一種方式 <ng-content>
<ng-content> 這個標簽到本文撰寫時為止，還沒有官方的文檔，甚至連占位符都沒有。但是這並不妨礙我們的使用，外國熱心網友已經總結出了 <ng-content> 在現階段的特點與作用。
基本用法
<!-- Wrapper.Component.html -->
<div>
hello
<ng-content></ng-content>
</div>
假設我們有一個上述的組件，然后向下面這樣調用：
<wrapper>
<span> World </span>
</wrapper>
那么最終的渲染結果將會是這樣的：
<div>
hello
<span> World </span>
</div>
看起來就是發生了很簡單的替換，但是如果在 Wrapper 中出現了多個 <ng-content> 會出現多個 <span> World </span> 嗎？答案是不會的。<ng-content> 的本質只是移動元素，並不會去自動的創建傳入的模板，所以就算用 ngFor 套住 <ng-content> 也不會出現很多個 <span> World </span>。如果傳入的是自定義的組件，這些組件也只會被實例化一次。
進階用法
當然，如果 <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>
最終的渲染結果將會是這樣：
<div>
hello
2333
<hr/>
<span> World </span>
</div>
除了設置 ng-content 標簽的 select 屬性之外，還可以在子元素上使用 ngProjectAs 屬性，這個屬性可以讓這個元素被父元素中指定的 ng-content 所捕獲。舉個例子：
<wrapper>
<div ngProjectAs="span"> World </div>
2333
</wrapper>
這次被傳入的模板變成了一個 div，但是因為設置了 ngProjectAs，所以“World”會出現在分割線下方。
第二種方式 NgTemplateOutlet 指令
使用 ng-content 確實可以起到傳入模板的效果，但是卻有個很致命的問題，就是無法傳遞數據到傳入的模板中。為了將數據傳遞到傳入的模板中，就需要使用到 NgTemplateOutlet 指令。
基本使用
這個指令可以用來在模板的指定位置實例化一個 TemplateRef 對象，同時，在實例化的過程中還可以傳入一個數據對象。而 TemplateRef 可以通過 ng-template 標簽來創建，舉個例子：
@Component({
selector: 'ng-template-outlet-example',
template: `
<ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
<ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
myContext = {data: 'World'};
}
ng-container 是一個虛擬的元素，在這個元素上我們使用了一個 NgTemplateOutlet 指令，指定了要實例化下面的名為 name 的 ng-template。同時把 myContext 這個對象作為實例化的數據上下文傳入，所以最終就會顯示 “Hello World!”。值得注意的是在 ng-template 里面獲取傳輸的數據上下文的方式：let-variableName='key'。
進階使用
接下來就要實現本文開頭提到的需求了，在組件外部傳入模板。還是以上面的例子為例，因為模板需要由外界作為子內容傳入，所以需要我們手動來捕獲模板，這里需要就需要使用 ContentChild：
@Component({
selector: 'wrapper',
template: `
<ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
@ContentChild(TemplateRef) name: TemplateRef<any>;
myContext = {data: 'World'};
}
就是這么簡單的改動就可以讓我們的組件從外界接受模板了，來試一試：
<wrapper>
<ng-template let-value="data">
<span>Hello {{value}}!</span>
</ng-template>
</wrapper>
總結
以上就是 Angular 中向組件傳遞模板的兩種方法，其中，使用 <ng-content> 標簽可以更方便的控制傳入的模板在 DOM 中的位置，而 NgTemplateOutlet 可以向傳入的模板傳遞渲染數據，兩者搭配使用可以起到很好的效果。
參考：