Question

如果我有一个自定义指令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与结构性指令一起使用？

Answer 1

我认为您不能，这是由于angular两种类型的指令都使用了设计。通过TemplateRef的{{1}}创建指令并通过createEmbeddedView注入指令会将模板生成为dom中的同级兄弟，而不是孩子。因此，Angular的注入也要尊重这一点，以使孩子和创建地点无法看到对方。您可以在脑海中画出一个额外的图层。

Here 是ViewContainerRef

的源代码

createEmbeddedView

如您所见，它将返回一个新的createEmbeddedView(context: any): EmbeddedViewRef<any> { return new ViewRef_(Services.createEmbeddedView( this._parentView, this._def, this._def.element !.template !, context)); }，并在其中注入您的ViewRef。

More details here.

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

1 个答案: