Родительский компонент, чтобы получить ссылку на любые дочерние дочерние компоненты в Angular.

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

Я делаю стек-блиц, чтобы показать вам, о чем я думал. Это работа, но я не уверен, что вы хотите точно так трудно угадать. Но из ИИ можно получить доступ к D. Как я уже говорил:

Как компонент может получить ссылку на компонент C? Компонент B знает компонент и должен предоставлять свойство компонента ViewChild C,поэтому компонент A должен иметь ViewChild, привязанный к компоненту B. С компонентом viewchildB A следует получить свойство viewchild C в компоненте B.

Как компонент может получить ссылку на компонент D, которыйсоздается во время выполнения? Начните с последнего вопроса и добавьте новые piublic свойства в компоненте c, которые будут заполнены результатом функции createComponent (возвращающей объект ComponentRef). angular.io/api/core/ViewContainerRef#createComponent

Вы можете увидеть код здесь на связанном стеке. https://stackblitz.com/edit/angular-abvno2