Question

感谢Gunter的回答，现在我更了解我的问题：

如果我正在编写自定义指令并且我打算将其应用于组件，那么让我的指令查询该组件模板的最佳方法是什么？

我正在编写一个属性指令，其目的只是改变它在主机中找到的第一个自定义按钮组件的样式。如果主机本身是我的自定义按钮组件，它会出于某种原因显示在我的指令的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-content标记内搜索，但它正在拾取主机MyCustomButtonComponent。

而且我不明白为什么第二个例子不起作用，因为我认为ViewChild应该搜索我的自定义下拉模板？然而，它并没有在那里找到MyCustomButtonComponent的实例。

Answer 1

指令没有视图，因此@ViewChild()无法正常工作。虽然支持@ContentChildren()。

angular2指令可以访问它应用的组件的模板吗？

1 个答案: