Angularjs2——自定義內容

1、什麼是自定義內容&做用

自定義內容一般是用來建立能夠複用的組件，例如模態框，導航欄。這兩個組件是常常要用到的，因此自定義內容就是爲組件服用提供了便利，實現了組件的複用，從而減小了重複代碼的編寫。

2、怎樣使用自定義內容

 與自定義內容相關的標籤：<ng-content>

如今以網頁中的header爲例，介紹如何使用ng-content

1.先建立組件用於header

 1 import {Component} from "@angular/core";
 2 @Component({
 3   selector:'header-content',
 4   template:`<div>
 5 <h4>Example header with ng-content</h4>
 6 <div style="background-color: green;padding:5px; margin: 2px;">
 7 <ng-content selector="header"></ng-content>
 8 </div>
 9 </div>`
10 })
11 export class HeaderComponent{
12 
13 }

2.在定義一個簡單的根組件去使用它

 1 import {Component} from "@angular/core";
 2 @Component({
 3   selector:'app',
 4   template:`<header-content>
 5 <header>Header content</header>//此處將自定義的內容放到header-content標籤之間
 6 </header-content>`
 7 })
 8 export class AppComponent{
 9 
10 }

最後組件的DOM樹會被Angular處理成如下：

<app>
<header-content>
<div>
<h4>Example Component with ng-content</h4>
<div style="background-color: green;padding:5px; margin: 2px;">
<header>Header content</header>
</div>
</div>
</header-content>
</app>

咱們注意到，header-content標籤之間的內容也就是<header>Header content</header>，被填充到了ng-content中去了，而HeaderComponent模版中的其餘元素沒有受到影響。之因此能夠顯示自定義的內容是由於，在ng-content中有select=「header」這個屬性，這是一個選擇器，它表示匹配header-content標籤中第一個header標籤，並將其填充到相應的ng-content中

自定義內容是能夠顯示多個內容的

 在HeaderComponent中模版改爲以下所示：

<div>
<h4>Example header with ng-content</h4>
<div style="background-color: green;padding:5px; margin: 2px;">
<ng-content selector="header"></ng-content>
</div>
<div style="background-color: green;padding:5px; margin: 2px;">
<ng-content selector=".class-select"></ng-content>
</div>
<div style="background-color: green;padding:5px; margin: 2px;">
<ng-content selector="#footer"></ng-content>
</div>
</div>

則在根組件中代碼以下：

<header-content>
 <header>Header content</header>//此處將自定義的內容放到header-content標籤之間
<div class="class-select">div with .class-select</div>
<div id="footer">Footer content</div>
 </header-content>

有了自定義內容，這樣咱們的不少組件均可以服用了