angular2 組件內容嵌入（ng-content）

 1、簡介

 內容嵌入是組件的一個高級功能特性，使用組件的內容嵌入特性能很好地擴充組件的功能，方便代碼的複用。

2、用法

如上，在模版中使用了<ng-content>標籤，這個標籤就是用來渲染組件嵌入內容的。在<ng-content>中有個select="header",用於匹配內容，並填充到ng-content中。

下面是一個簡單的根組件來使用它：

最後組件的DOM樹會被Angular渲染成：

注意到在<example-content>標籤之間的內容，也就是<header>Header content</header>，被填充到ng-content，而NgContentExampleComponent組件模版中的其餘元素沒有受到影響。那麼嵌入的內容是如何匹配顯示的呢？上文說起到了select="header"，select屬性是一個選擇器，與CSS選擇器做用是相似的，它表示匹配<example-content>標籤之間的第一個header標籤，並將其填充到相應的ng-content中。
另外，還能夠同時使用多個嵌入內容。下面修改NgContentExampleComponent組件的代碼，經過標籤選擇器、類選擇器、屬性選擇器來指定多個ng-content,示例代碼以下：

而後修改NgContentAppComponent組件中的代碼來使用多個嵌入內容，示例代碼以下：