如何在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 );
}

如果您有多个孩子，则可以在 QueryList 泛型类型旁边使用 @ViewChildren 装饰器

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

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