Как получить доступ к дочернему компоненту объекта в Angular

Question

У меня есть родительский компонент id="componentOne", где включен другой дочерний компонент <app-buttons>:

<div id="componentOne">
    <app-buttons
    [component]="'WeeklyScheduleComponent'"
    [buttonTypes]="['add', 'filter']"
    [position]="'right-bottom'"
  ></app-buttons>
</div>

Внутри компонента app-buttons есть:

 ngOnInit() {
    this.buttonUsage = new ButtonUsage(this.component, this.buttonTypes);
  }

Итак, как получить доступ к this.buttonUsage из родительского компонента после инициализации this.buttonUsage = new ButtonUsage?

Answer 1

Вы можете получить доступ с помощью viewChild , и ваш экземпляр компонента будет доступен в ngAfterViewInit

@ViewChild(AppButtonsComponent) appButtonsViewChild: AppButtonsComponent;


ngAfterViewInit() {
 console.log(this.appButtonsViewChild.buttonUsage );
}

, если у вас несколько детей, вы можете использовать @ ViewChildren декоратор рядом с QueryList универсальным типом

@ViewChildren(AppButtonsComponent) appButtonsViewChildren: QueryList<AppButtonsComponent>;

ngAfterViewInit() { 
  let buttons: AppButtonsComponent[] = this.appButtonsViewChildren.toArray();
  console.log(buttons);
}