结构指令可以使用@ContentChild 引用子组件吗？答案

【问题标题】：Can a structural directive refer to a child component using @ContentChild?结构指令可以使用@ContentChild 引用子组件吗？
【发布时间】：2019-05-02 18:36:18
【问题描述】：

如果我有一个自定义指令ParentDirective 和自定义组件ChildComponent 安排如下：

<div appParent>
  <app-child></app-child>
</div>

...那么我可以在指令中使用@ContentChild 来引用组件：

@ContentChild(ChildComponent) child: ChildComponent;

请参阅this StackBlitz 这是有效的。（它会登录到控制台以显示 child 成员已设置）。

但是，如果我将 appParent 更改为 structural 指令，则永远不会设置 child 成员。

<div *appParent>
  <app-child></app-child>
</div>

见this StackBlitz。

不能将@ContentChild 与结构指令一起使用吗？

【问题讨论】：

我在移动设备上，所以无法测试，但它可以与 ViewChild 一起使用吗？
@IngoBürk：不。你会期待吗？据我了解，@ViewChild 允许直接在组件视图中访问组件，而不是访问其中呈现的内容。
我在想，这可能是由于结构指令本身去糖化到模板中的方式，其中孩子对我来说更像是一个视图孩子而不是内容孩子。但似乎你现在已经得到了答案。

标签： angular angular-directive angular-components

【解决方案1】：

我认为你不能，这是由于 angular 对这两种类型的指令使用的设计。通过TemplateRef 创建指令并通过ViewContainerRef 的createEmbeddedView 注入它将模板生成为dom 中的同级，而不是子级。因此，Angular 的注入也尊重这一点，因此子节点和创建位置无法看到对方。您可以在脑海中将其绘制为额外添加的图层。

Here是createEmbeddedView的源代码

  createEmbeddedView(context: any): EmbeddedViewRef<any> {
    return new ViewRef_(Services.createEmbeddedView(
        this._parentView, this._def, this._def.element !.template !, context));
  }

如您所见，它返回一个新的ViewRef，并在其中注入您的context。

More details here.

【讨论】：

谢谢。这不是我真正想要的答案，但很高兴知道。