Angular 6: доступ к дочернему элементу дочернего компонента (от родительского) - PullRequest
Новая
       21

Angular 6: доступ к дочернему элементу дочернего компонента (от родительского)

0 голосов
/ 09 февраля 2019

Как получить доступ (вызвать определенные методы) дочерних компонентов (2) дочерних компонентов некоторого родительского (контейнерного) компонента;т.е. ParentCmp содержит внутри шаблона два дочерних компонента (их селекторы + ссылки на шаблоны) и вызывает определенные методы LoadingPanels внутри этих (двух дочерних) компонентов:

ParentCmp.html: ....

<child1 #child1></child1>
<child2 #child2></child2>

ParentCmp.ts: 

  @ViewChild('child1', read: ComponentRef<child1Cmp>) child1Cmp: ComponentRef<InvitationsBarComponent>;
  @ViewChild('child2') meetingsBarCmp: Child2Cmp;
...

child1Cmp.instance.loadingPnl.load(() => {....});
child2Cmp.loadingPnl.load(() => {....});

?

1 Ответ

0 голосов
/ 09 февраля 2019

Попробуйте: 

import { Component, ViewChild } from '@angular/core';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './child2/child2.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild(Child1Component) child1: Child1Component;
  @ViewChild(Child2Component) child2: Child2Component;

  ngAfterViewInit() {
    this.child1.child1Method();
    this.child2.child2Method();
  }

}

И в вашем шаблоне: 

<child1></child1>

<child2></child2>

PS: Вы можете быть уверены, что получите доступ к дочернему компонентуЭкземпляры в ngAfterViewInit, как тогда, когда представление будет полностью загружено.

Вот Рабочий пример StackBlitz для вашей ссылки.

...