嵌套在ng-content中的目标组件

Question

我试图定位到嵌套在ng-content中的组件，并像ViewChild一样处理它。例如，ComponentB放在ng-content的{​​{1}}内部。

我想做的事情类似于：

ComponentA

所以我可以像这样使用它的功能

@ViewChild('componentB') componentBViewChild: ComponentB;

问题是我无法添加引用来定位嵌套组件。

欢迎任何帮助

Answer 1

使用@ContentChild代替@ViewChild来引用投影内容。 @ViewChild仅查找在Component的HTML模板中直接找到的元素。

例如，给ComponentA加上以下HTML：

<div>
    <ng-content></ng-content>
</div>

用途如下：

<component-a>
  <component-b></component-b>
</component-a>

您可以按以下方式引用ComponentB中的ComponentA：

@ContentChild(ComponentB) componentB: ComponentB;

可以找到文档here。