angular2 - content projection-

angular2中的內容映射：

App.component:

<my-day>
    <my-lucky> </my-lucky>
</my-day>

MyDay.component:

selector:'my-day'
template`<h1>my day </h1>
          <ng-content></ng-content>              
`    

MyLucky.component:

selector:'my-lucky',
template:'<p>One fine day</p> '

MyLucky中的內容就會映射到MyDayComponent的'ng-content'標籤內；

 @ContentChildren(MyLuckyComponent):;MYDay經過它訪問;

------------------------------------------

ng-content

ng-content擁有一個select屬性，容許選擇性地加載組件。但必須保證，所供選擇的組件都放在<my-day></my-day>內部。

:

         <ng-content select='[one]'></ng-content> //按屬性選擇  ;;能夠提供屬性值：select='[one=*]'，按屬性值來加載。

選擇：<my-lucky one> </my-lucky>          選擇具備one屬性的；

 

　　　　<ng-content select='my-lucky'></ng-content>//按標籤選擇

選擇：<my-lucky></my-lucky>

 

　　　　<ng-content select='.class1'></ng-content>//按CSS選擇；

選擇：<div class='class1'></div>

 

在設置了select屬性後，可容許一個組件內擁有多個ng-content，各自按須加載。

 

------------------------------------------------------

惋惜ng-content select沒法進行動態加載。

　<ng-content select='{{selected}}'> 不行。

　　<my-lucky [one]='visibility.lucky'> 不行。

　 <my-lucky one='{{visibility.lucky}}'>不行。

好吧，我是這樣的：

<my-day>
    <my-lucky  *ngIf='visibility.lucky'></my-lucky>
    <my-wonderfull *ngIf='visibility.wonderfull'></my-wonderfull>
</my-day>


<ng-content> </ng-content> //不寫任何屬性。

　　

refer:https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

個人Github例子：https://github.com/zhantewei2/Ionic2-example-notes/tree/master/pages/testSegment