最近在寫乙個日期選擇器元件，為了滿足將來可能出現的各種需求，所以需要能夠高度的自定義元件的樣式。為了達到這個目的，需要能夠在日期選擇器元件外控制每個日期格仔內要顯示的內容，比如，標上節假日之類的。這時候，元件的一部分模板就需要由呼叫方提供。
在 react 裡面，這種需求挺簡單的，只要實現乙個date => element這樣的函式就好了，但是 angular 模板是純粹的模板，需要使用一些專門的概念才能實現這個功能。
這個標籤到本文撰寫時為止，還沒有官方的文件，甚至連佔位符都沒有。但是這並不妨礙我們的使用，外國熱心網友已經總結出了在現階段的特點與作用。
hello
假設我們有乙個上述的元件，然後向下面這樣呼叫：
那麼最終的渲染結果將會是這樣的：
hello
world
ngfor套住world。如果傳入的是自定義的元件，這些元件也只會被例項化一次。
當然，如果的功能僅僅只是這樣就顯得太雞肋了，在使用的時候可以指定乙個選擇器，這個選擇器可以捕獲相符的直接子元素。例如：
hello
然後像下面這樣使用：
2333
最終的渲染結果將會是這樣：
hello
2333
world
ng-content標籤的select屬性之外，還可以在子元素上使用ngprojectas屬性，這個屬性可以讓這個元素被父元素中指定的ng-content所捕獲。舉個例子：
2333
這次被傳入的模板變成了乙個div，但是因為設定了ngprojectas，所以「world」會出現在分割線下方。
使用ng-content確實可以起到傳入模板的效果，但是卻有個很致命的問題，就是無法傳遞資料到傳入的模板中。為了將資料傳遞到傳入的模板中，就需要使用到ngtemplateoutlet指令。
這個指令可以用來在模板的指定位置例項化乙個templateref物件，同時，在例項化的過程中還可以傳入乙個資料物件。而templateref可以通過ng-template標籤來建立，舉個例子：
@component(}!`})
class ngtemplateoutletexample ;
}
ng-container是乙個虛擬的元素，在這個元素上我們使用了乙個ngtemplateoutlet指令，指定了要例項化下面的名為name的ng-template。同時把mycontext這個物件作為例項化的資料上下文傳入，所以最終就會顯示 「hello world!」。值得注意的是在ng-template裡面獲取傳輸的資料上下文的方式：let-variablename='key'。
接下來就要實現本文開頭提到的需求了，在元件外部傳入模板。還是以上面的例子為例，因為模板需要由外界作為子內容傳入，所以需要我們手動來捕獲模板，這裡需要就需要使用contentchild：
@component()
class ngtemplateoutletexample ;
}
以上就是 angular 中向元件傳遞模板的兩種方法，其中，使用標籤可以更方便的控制傳入的模板在 dom 中的位置，而ngtemplateoutlet可以向傳入的模板傳遞渲染資料，兩者搭配使用可以起到很好的效果。
參考：ng-content: the hidden docs
父元件向子元件傳遞資料 14 父元件向子元件通訊
1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說，父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...
vue prop 向子元件傳遞資料
prop是你可以在元件上註冊的一些自定義attribute。當乙個值傳遞給乙個prop attribute的時候，它就變成了那個元件例項的乙個property。乙個 prop 被註冊之後，你就可以像這樣把資料作為乙個自定義 attribute 傳遞進來 乙個元件預設可以擁有任意數量的prop，任何值...
vue子元件向父元件傳遞資料
vue專案中經常使用到元件之間的數值傳遞，實現的方法很多，但是原理基本上大同小異。子元件向父元件出傳遞資料，使用自定義事件的方式。父元件向子元件傳遞資料，使用props屬性的方式。推薦文章 vue筆記 父元件向子元件傳遞資料 我們可以從子元件中想父元件中傳遞多個資料，在子元件中要做的工作只是，使用t...