如何访问 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 = new ButtonUsage从父组件获取对this.buttonUsage的访问？

Answer 1

您可以使用 viewChild 进行访问，您的组件实例将在 ngAfterViewInit

中可用

@ViewChild(AppButtonsComponent) appButtonsViewChild: AppButtonsComponent;


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

如果你有多个 children 你可以使用 @ViewChildren 装饰器和 QueryList 通用类型

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

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

如何访问 Angular 中的子组件对象

How to get access to child component object in Angular

angular

angular6

angular7