angular - 如何在 Angular 6 中选择原生元素的 ContentChild？

Question

我有一个使用内容投影的组件。

<ng-content select="button">
</ng-content>

我想在我的组件中做这样的事情:

@ContentChild('button') button: ElementRef;

但是，当我检查 this.button 时，它在 ngAfterViewInit 和 ngAfterContentInit 中都是未定义。

如果我的内容子项是 native 元素而不是自定义组件，如何选择它？

Answer 1

没有一个查询装饰器可以在没有引用的情况下选择 native 元素。

@ViewChild('button')
@ViewChildren('button')
@ContentChild('button')
@ContentChildren('button')

它不是 CSS 选择器。

查询装饰器在依赖关系图中搜索匹配类型并选择它们。匹配类型可以是模板引用、组件或指令。

选择内容中特定元素的推荐方法是使用指令对其进行标记。

@Directive({...})
export class MyButtonDirective {}

现在您可以在父组件中查询它。

@ContentChild(MyButtonDirective) button: MyButtonDirective;

当您使用字符串值时，它指的是模板变量引用。这些被写为#someValue，它们可以是模板引用、组件或指令。

<button #myButton></button>

您现在可以将上述内容引用为

@ViewChild('myButton')

由于 View 的工作方式，我不知道这是否适用于 ContentChild。 #myButton 模板变量在父级依赖关系图中可能不可见。

或者，您可以注入(inject)父组件的 ElementRef，然后使用 native JavaScript 搜索您要查找的子组件。从 Angular 的 Angular 来看，这是一个不好的做法，因为这个想法是将应用程序与 DOM 分开。