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

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的密山網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

第一種方式

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

基本用法

  hello
  

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

   World 

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

  hello
   World 

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

進(jìn)階用法

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

  hello
  
  

  

然后像下面這樣使用：

   World 
  2333

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

  hello
  2333
  

   World 

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

  
 World 
  2333

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

第二種方式 NgTemplateOutlet 指令

使用 ng-content 確實(shí)可以起到傳入模板的效果，但是卻有個(gè)很致命的問題，就是無法傳遞數(shù)據(jù)到傳入的模板中。為了將數(shù)據(jù)傳遞到傳入的模板中，就需要使用到 NgTemplateOutlet 指令。

基本使用

這個(gè)指令可以用來在模板的指定位置實(shí)例化一個(gè) TemplateRef 對(duì)象，同時(shí)，在實(shí)例化的過程中還可以傳入一個(gè)數(shù)據(jù)對(duì)象。而 TemplateRef 可以通過 ng-template 標(biāo)簽來創(chuàng)建，舉個(gè)例子：

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  

  Hello {{name}}!
`
})
class NgTemplateOutletExample {
 myContext = {data: 'World'};
}

ng-container 是一個(gè)虛擬的元素，在這個(gè)元素上我們使用了一個(gè) NgTemplateOutlet 指令，指定了要實(shí)例化下面的名為 name 的 ng-template。同時(shí)把 myContext 這個(gè)對(duì)象作為實(shí)例化的數(shù)據(jù)上下文傳入，所以最終就會(huì)顯示 “Hello World!”。值得注意的是在 ng-template 里面獲取傳輸?shù)臄?shù)據(jù)上下文的方式：let-variableName='key'。

進(jìn)階使用

接下來就要實(shí)現(xiàn)本文開頭提到的需求了，在組件外部傳入模板。還是以上面的例子為例，因?yàn)槟０逍枰赏饨缱鳛樽觾?nèi)容傳入，所以需要我們手動(dòng)來捕獲模板，這里需要就需要使用 ContentChild：

@Component({
 selector: 'wrapper',
 template: `
  
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef;
 myContext = {data: 'World'};
}

就是這么簡(jiǎn)單的改動(dòng)就可以讓我們的組件從外界接受模板了，來試一試：

  
    Hello {{value}}!
  

總結(jié)

以上就是 Angular 中向組件傳遞模板的兩種方法，其中，使用 標(biāo)簽可以更方便的控制傳入的模板在 DOM 中的位置，而 NgTemplateOutlet 可以向傳入的模板傳遞渲染數(shù)據(jù)，兩者搭配使用可以起到很好的效果。

以上所述是小編給大家介紹的Angular 向組件傳遞模板的兩種方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！