Может ли директива angular2 обращаться к шаблону компонента, к которому он применяется?

Question

Обновлены благодаря ответу Гюнтера и теперь, когда я лучше понимаю, что я спрашиваю:

Если я пишу пользовательскую директиву, и я планирую применить его к компоненту, что это лучший способ, чтобы мой задать запрос в шаблон этого компонента?

Я пишу директиву атрибута, целью которого является просто изменить стиль первого компонента пользовательской кнопки, который он находит на своем хосте. Если сам хост является моим настраиваемым компонентом кнопки, он по какой-либо причине появляется в запросе ContentChildren моей директивы. И если хост вместо этого содержит мой пользовательский компонент кнопки в своем шаблоне, моя директива не может его найти.

Вот моя директива:

import { Directive, AfterViewInit, AfterContentInit, ContentChildren, QueryList, ViewChild, ElementRef } from '@angular/core'; 
import { MyCustomButtonComponent } from './my-custom-button.component'; 

@Directive({ 
    selector: '[specialButton]' 
}) 
export class SpecialButtonDirective implements AfterViewInit, AfterContentInit { 

    hostElement: ElementRef; 
    @ViewChild(MyCustomButtonComponent) myCustomButtonViewChild; 
    @ContentChildren(MyCustomButtonComponent, {descendants: true}) myCustomButtonQueryList: QueryList<MyCustomButtonComponent>; 

    constructor(el: ElementRef) { 
     this.hostElement = el; 
    } 

    ngOnInit() { 
     //Should I query here? Via this.hostElement.nativeElement.querySelector(...) perhaps? 
    } 

    ngAfterContentInit(): void { 
     console.log('Value of myCustomButtonQueryList.first [' + this.myCustomButtonQueryList.first + ']'); 
    } 
    ngAfterViewInit(): void { 
     console.log('Value of myCustomButtonViewChild [' + this.myCustomButtonViewChild + ']'); 
    } 
} 

А потом в моей основной компонент, который включает в себя MyCustomButtonComponent и SpecialButtonDirective в директивах:

<my-custom-button specialButton>Host is Button</my-custom-button> 
<!-- Value of myCustomButtonQueryList.first [[object Object]] --> 
<!-- Value of myCustomButtonViewChild [undefined] --> 

<!--The dropdown toggle button is a my-custom-button in my-custom-dropdown's template --> 
<my-custom-dropdown specialButton> 
    <ul> 
     <li><div>Item 1</div></li> 
     <li><div>Item 2</div></li> 
    </ul> 
</my-custom-dropdown> 
<!-- Value of myCustomButtonQueryList.first [undefined] --> 
<!-- Value of myCustomButtonViewChild [undefined] --> 

Я не понимаю, почему первый пример находит мой обычай потому что я думал, что ContentChildren просматривал только теги ng-контента, но он собирает хост MyCustomButtonComponent.

И я не понимаю, почему второй пример не работает, потому что я думал, что ViewChild должен был искать шаблон моего настраиваемого выпадающего списка? И все же он не находит экземпляр MyCustomButtonComponent.

Answer 1

Директива не имеет вида, поэтому @ViewChild() не будет работать. @ContentChildren() поддерживается.