Angular 2 ContentChild未定义

Question

我想获得一个元素的ElementRef，我已经添加了一个使用Directive作为组件的ContentChild的自定义属性，但是当内容被初始化后我记录它时，我得到了未定义的元素。你能告诉我为什么吗？

TestComponent：

@Component({ 
    selector: 'test-component', 

    template: ` 
    <h1>Test Component</h1> 
    <ng-content></ng-content> 
    ` 
}) 
export class TestComponent implements AfterContentInit { 
    @ContentChild(TestDirective) child; 

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

TestDirective：

@Directive({ 
    selector: '[test-directive]' 
}) 
export class TestDirective { 
} 

AppComponent：

@Component({ 
    selector: 'my-app', 
    declarations: ['TestComponent'], 
    template: ` 
    <h1>{{title}}</h1> 
    <test-component> 
     <h2 test-directive>Test Directive</h2> 
    </test-component> 
    ` 
}) 
export class AppComponent { 
    title = 'Hello123!'; 
} 

请参阅想普拉克：https://plnkr.co/edit/9KUnFWjVIbYidUtF2Avf?p=preview

Answer 1

你错过编辑您的TestDirective的declaration！

看到更新后的plunker：https://plnkr.co/edit/x5rLcvJnRhnVxM7fgvvK?p=preview

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { TestComponent } from './test.component'; 
import { TestDirective } from './test.directive'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ], 
    declarations: [ 
    AppComponent, 
    TestComponent, 
    TestDirective 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
}