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

转载于:https://www.cnblogs.com/ztwBlog/p/6235511.html