前言

之前在這篇介紹過 <ng-content> 可以達成嵌入式設計，但是透過這種方法只能做到模板的部分，也就是在 A 模板中嵌入 B 模板，要是想在 A 中順便嵌入 B 的組件內容呢？

不太理解文字的意思？繼續看下去。

ContentChild

app.ts

import {Component}       from 'angular2/core';
import {ParentComponent} from './parent';
import {ChildComponent}  from './child';

@Component({

selector: 'my-app',

template:         &lt;h2&gt;App Component&lt;/h2&gt;         &lt;my-parent&gt;            &lt;my-child&gt;&lt;/my-child&gt;         &lt;/my-parent&gt;    ,

directives:[ParentComponent,ChildComponent]

})

export class AppComponent {

}

主程式的樣子，要求 <my-parent> 裡面包著一個 <my-child>

child.ts

import {Component} from 'angular2/core';

@Component({

selector: 'my-child',

template:         &lt;div&gt;Child Component&lt;/div&gt;    

})

export class ChildComponent {

name:string = 'childName';

}

name 是我們待會會用到的東西。

parent.ts

import {Component,ContentChild} from 'angular2/core';
import {ChildComponent}         from './child';

@Component({

selector: 'my-parent',

template:         &lt;div&gt;Parent Component&lt;/div&gt;         &lt;ng-content&gt;&lt;/ng-content&gt;         &lt;p&gt;{{child.name}}&lt;/p&gt;    

})

export class ParentComponent {

@ContentChild(ChildComponent)

child:ChildComponent;

}

<p>{{child.name}}</p> 這邊要求 child:ChildComponent 的物件，也就是 parent 直接調用 child 的內容，這邊是透過 @ContentChild 來處理， 其實就跟注入的概念很像。

Plunker