запросов для просмотра переменных внутри директив не работает

Question

У меня есть директива:.

@Directive({ 
    selector: '[myDirective]' 
}) 

export class MyDirective implements AfterViewInit { 
    @ViewChild('wrapper') wrapper; 
    @ViewChild('list') list; 

    ngAfterViewInit() { 

    // Both of these are undefined 
    console.log(wrapper, list); 
    } 
} 

Что нужно для запроса переменных в представлении, что он используется в

Так что у меня есть этот шаблон в один из моих компонентов, MyComponent:

<div #wrapper myDirective> 
    <ul #list></ul> 
</div> 

необходимо найти эти переменные, но директива никогда не удается сделать это так, как я сейчас. Мое предположение о том, почему это происходит, состоит в том, что, поскольку директива фактически не имеет представления, ngAfterViewInit работает слишком рано и/или @ViewChild пытается найти wrapper и list в неположенном месте.

Как я могу убедиться, что директива может найти переменные?

Answer 1

Просто измените ViewChild на ContentChild. Я полагаю, он должен работать

export class MyDirective implements AfterViewInit { 
    @ContentChild('wrapper') wrapper; 
    @ContentChild('list') list; 

    ngAfterContentInit() { 
    console.log(this.wrapper, this.list); 
    } 
} 

Plunker Example