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

Question

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

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

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

@ContentChild('button') button: ElementRef;

但是，当我检查this.button 时，undefined 在ngAfterViewInit 和ngAfterContentInit 中都是ngAfterContentInit。

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

Answer 1

要了解的重要一点是，您传递给@ContentChild 的选择器不是 CSS 选择器，您无法根据其ID、类或元素类型找到内容子项。您只能使用 # 运算符搜索您为其提供的标识符名称。

所以给定一个名为 my-comp 的组件和以下用法：

<my-comp><button #buttonName>Click me</button></my_comp>

您可以通过以下方式找到它：

@ContentChild('buttonName') button: ElementRef;

编辑

正如 OP 对 ckTag 答案的评论中所指出的那样（他领先我一分钟），这确实意味着调用代码需要知道您希望内容被标记为特定名称。

如果您的组件确实需要了解其子内容的详细信息，更好的答案实际上是向@ContentChild 提供指令类型：

@ContentChild(MyButtonComponent, { read: ElementRef })
button: ElementRef;

这也更好，因为您现在可以实际期望知道内容的类型；毕竟，调用代码可以将#button 粘贴在div 上。

这确实意味着告别使用常规 HTML button 元素，但还有其他好处。例如，您可以提供一条消息来指导您的调用代码，如下所示：

<ng-content></ng-content>
<div *ngIf="button">Error: Please provide a MyButtonComponent</div>

Answer 2

没有一个查询装饰器可以选择没有引用的原生元素。

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

它不是 CSS 选择器。

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

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

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

现在你可以在你的父组件中查询这个了。

@ContentChild(MyButtonDirective) button: MyButtonDirective;

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

<button #myButton></button>

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

@ViewChild('myButton')

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

或者，您可以注入父组件的ElementRef，然后使用本机 JavaScript 搜索您正在寻找的子组件。从 Angular 的角度来看，这是一个不好的做法，因为这个想法是将您的应用程序与 DOM 分开。