Angularの@ContentChildが機能しません

Question

Angular2を理解しようとしていますが、何らかの理由で@ContentChildが動作していません。私の終わりからは非常に基本的な間違いがなければなりませんが、私はそれを理解できません。どんな助けでも大歓迎です。あなただけではない兄弟

のコンテンツのためにそれが動作します。この道を照会することができ

app.components.ts

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

@Component({ 
    selector: 'app-root', 
    template: ` 
    <p #boundContent>{{localCounter}}</p> 
    Verify me: <p>{{boundContent.textContent}}</p> 
     <hr> 
     <fa-contentchild></fa-contentchild> 
      `, 
    styles: [` 
     h1{color:red;} 
    `] 
}) 
export class AppComponent { 
    localCounter:number =700; 
    doShow:boolean=false; 
    title = 'angular sucks!'; 
} 

contentchild.component.ts @ContentChild()で

import { AfterContentInit, Component, ContentChild } from '@angular/core'; 

@Component({ 
    selector: 'fa-contentchild', 
    template: ` 
    <p>I am from content Child: {{boundContent}}</p> 
    `, 
    styles: [] 
}) 
export class ContentchildComponent implements AfterContentInit { 

    @ContentChild('boundContent') 
    boundContent:HTMLElement; 

    constructor() { } 

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

} 

Answer 1

template: ` 

    Verify me: <p>{{boundContent.textContent}}</p> 
     <hr> 
     <fa-contentchild> 
     <p #boundContent>{{localCounter}}</p> 
     </fa-contentchild> 
      `, 

別の方法は、コンソールで

template: ` 
    <p #boundContent>{{localCounter}}</p> 
    Verify me: <p>{{boundContent.textContent}}</p> 
     <hr> 
     <fa-contentchild [content]="boundContent"></fa-contentchild> 
      `, 

export class ContentchildComponent implements AfterContentInit { 

    @Input() 
    boundContent:HTMLElement; 

    constructor() { } 

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

}