使用時`<ng-content>`

Question

尋找訪問組件的值的方法使用<ng-content>當訪問組件的值：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'home-page', 
    template: `<person-box>{{name}}</person-box> <!-- something like this -->` 
}) 
export class HomePageComponent { 
    // missing code? 
} 

組件的代碼：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'person-box', 
    template: `<div style="background-color: blue;"><ng-content></ng-content></div>` 
}) 
export class PersonBoxComponent { 
    name = 'Katharina Muster'; 
} 

（上面的例子是當然非常簡化的）

---

當使用@ViewChild它的工作原理：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'home-page', 
    template: `<person-box>{{box.name}}</person-box>` 
}) 
export class HomePageComponent { 
    @ViewChild(PersonBoxComponent) box: PersonBoxComponent; 
} 

Answer 1

@ContentChild(PersonBoxComponent) box:PersonBoxComponent; 

ngAfterContentInit() { 
    console.log(this.box); 
}