Question

目标是了解如何获取对任何嵌套组件的引用。这是带有4个嵌套组件的示例。 A将B作为子项，B将C作为其子项，C将D作为动态/运行时创建的子项。因此，Angular是否提供以下解决方案：

一个组件如何获得对C组件的引用？

组件如何获取在运行时创建的D组件的引用？

@Component({
  selector: 'A',
  template: `<B></B>`
})
export class A {}


@Component({
  selector: 'B',
  template: `<C></C>`
})
export class B {}



@Component({
  selector: 'C',
  template: `<div>C Component</div> <div #container></div>`
})
export class C implements OnInit{
  @ViewChild('container')
  container: TemplateRef<any>;

  constructor(private resolver:ComponentFactoryResolver){}
  ngOnInit() {
    const DFactory= this.resolver.resolveComponentFactory(D);
    this.container.createComponent(DFactory);
  }

}

@Component({
  selector: 'D',
  template: `<div>D component</div>`
})
export class D{}

Answer 1

为了让您了解我的想法，我进行了一次突击。这是可行的，但我不确定您到底想要什么很难猜到。但是从A我可以访问D。就像我告诉你的：

一个组件如何获得对C组件的引用？ 组件B知道组件，并且应该公开ViewChild组件C的属性，因此组件A应该将ViewChild绑定到组件B。有了viewchildB，组件A应该可以在组件B中获得viewchild C的属性。

一个组件如何获得对在运行时创建的D组件的引用？ 从最后一个问题开始，并在组件c中添加新的公共属性，该属性将被createComponent函数的结果填充（返回ComponentRef对象）。 angular.io/api/core/ViewContainerRef#createComponent

您可以在链接的stackblitz上看到此处的代码。 https://stackblitz.com/edit/angular-abvno2

父组件以获取对Angular中任何子子组件的引用

1 个答案: