从动态创建的组件访问子组件

Question

内部全局组件我有动态创建组件的方法

const comFactory = this.resolver.resolveComponentFactory(ParentComponent);
const component: any = this.componentContainer.createComponent(comFactory);

（其中 componentContainer 是 ViewContainerRef）

在我的父组件中，我有子组件（里面还有两个子组件）：

<child-component #childCmp></child-component>

有什么方法可以从我的全局组件访问子组件吗？

Answer 1

您可以在父组件内部获取子组件的

viewChildren

。

...
export class ParentComponent {
  @ViewChildren(ChildComponent) childs: QueryList<ChildComponent>;
  ...
}

然后在全局组件中访问这些子组件，如下所示。

const comFactory = this.resolver.resolveComponentFactory(ParentComponent);
const component: any = this.componentContainer.createComponent(comFactory);
const childViewChildren: QueryList<ChildComponent> = component.instance.childs;

有时，这可能不起作用，因为

ViewChild

仅在

ngAfterViewInit

之后才可用。然后您可以尝试以下方法，但您的子组件不应使用

@if

(

*ngIf

) 或

@for

(

*ngFor

) 有条件地渲染。

@ViewChildren(ChildComponent, { static: true }) childs: QueryList<ChildComponent>;

设置此属性会在更改检测周期运行之前初始化视图子查询。