Angular ng-content select使用方法

Angular中，會透過ng-content來協助將內容放置到child component中，最近才知道原來ng-content內還有一個selector的方式，可以讓使用更彈性。


一開始只知道ng-content使用方式像是： card.component.html ```html

{{cardTitle}}

{{cardFooter}}

``` 這邊將card component template定義好後，指定要外部接收到的html放入ng-content位置： app.component.html ```html ``` 呈現方式很簡單，CardComponent接受外部的參數，title、message與footer，並顯示對應文字，同時允許額外加入一個button在其中，跟message顯示在一起。 這邊就會將card directive內的button，放置到ng-content位置處。 不過現在有了ng-content的selector後，可以做的事情就更多了。ng-content的selector會找到所有符合條件的element，並放置到對應的ng-content區塊。 基本有下列幾種方式： 1. 透過html 屬性 2. 透過css 3. 透過html tag 不過值得注意的一點是，一個component內只允許存在一個沒有selector的ng-content。 下面依序介紹上列三種selector使用方式： ### 透過html 屬性指定放置位置 上面的程式碼可以做一些調整，我們可以指定有herder屬性的html放置在 title區塊；有footer屬性則放置於footer區塊；其餘的放在message區塊，選擇屬性的語法語Angular內attribute binding語法相同，是使用[]： card.component.html： ```html

``` app.component.html： ```html {{title}} {{footer}} ``` 除此之外，還可以指定數值條件，像是header=1，指定header為1的才放入。 從上面的程式稍微做調整，調整為header為1的內容才放入header區塊： card.component.html: ```html

``` ```html {{title}} Content Header {{footer}} ``` ### 透過CSS指定放置位置 透過css選擇，selector語法為 .className ， 在class name前面加上一個 . 表示要選擇的對象為CSS，因此可以調整剛剛的html，改用CSS，可以達到相同效果： card.component.html ```html

``` app.component.html ```html {{title}} Content Header {{footer}} ``` ### 透過HTML TAG指定放置位置 最後一個是透過指定HTML TAG放置於對應位置，selector是 tagName 即可。 稍微調整剛剛的程式碼，可以達到相同的效果： ```html

``` ```html

{{title}}

Content Header

{{footer}}

``` ### 透過複合條件指定 除了使用單一條件外，也可以指定多個條件，條件混合著html屬性、CSS等基本select方法： 如果今天有下列兩個html，我們只希望其中一項放入header區塊： ```html

{{title}}

Content Header

``` 調整上面程式碼來做比較，兩者同時有display屬性，也有header class，差異在於header屬性的值，如果我們只希望顯示header的值為1的那一個項目，則可以透過，即可選擇到我們要的那一個，這種方式在做複雜的專案時會有幫助，用到機會也許不多，不過哪一天用到時可以省下許多時間。 ```html ```
參考文章：[Angular 2 Transclusion using ng-content](https://scotch.io/tutorials/angular-2-transclusion-using-ng-content)