1. 程式人生 > >ng2中的ng-content用法

ng2中的ng-content用法

就會 ges 選擇器 sel size 模板 spa .cn 用途

用途:1.ng-content用於在組件中嵌入內容

   2.ng-content可以在組件中嵌入模板代碼,方便定制可復用的組件

select屬性支持css選擇器,如"#id",".class",["name"="value"]等

eg:父組件html內容為:

<app-ngcontent>    
    <div class="left">123456</div>
    <div class="right">654321</div>   
</app-ngcontent>

<--註:這裏的app-ngcontent為可復用的組件模板的選擇器--
>

可復用的組件模板為:

<div style="font-size:20px;">
    <ng-content select=".left"></ng-content>
</div>
<div style="color:red;">
    <ng-content select=".right"></ng-content>
</div>

那麽頁面上就會顯示:

技術分享

ng2中的ng-content用法