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

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

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

我想在组件中执行以下操作:

@ContentChild('button') button: ElementRef;

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

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

最佳答案

要了解的重要一点是，传递给@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>

关于angular - 如何在Angular 6中选择 native 元素的ContentChild？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51673978/