从父组件调用多个子方法

Question

我正在尝试使用ViewChild从父组件调用children方法：

T = zeros(1,7)+12;

问题是这只适用于父视图中的第一个子组件实例：

...

export class Parent {
  @ViewChild(ProfileImageComponent) profileImage: ProfileImageComponent;
  ...

  updateProfile() {
    ...
    this.profileImage.updateAvatar();
  }
}

如何调用每个profileImage子方法，以便更新所有内容？

Answer 1

使用@ViewChildren中的@angular/core来获取对组件的引用。

模板：

<profile-image #profile></pofile-image>
<profile-image #profile></pofile-image>
<profile-image #profile></pofile-image>

组件：

import { ViewChildren, QueryList } from '@angular/core';

@ViewChildren('profile') components:QueryList<ProfileImage>;

ngAfterViewInit(){
    // call method
   this.components.forEach(ProfileImage => {
          ProfileImage.updateAvatar();
   }); 
}

Answer 2

您可以将名称设置为子组件，如：

<profile-image #child1></pofile-image> 
...
<profile-image #child2></pofile-image>
...
<profile-image #child3></pofile-image>

并在父母中声明：

@ViewChild('child1') profileImage1: ProfileImageComponent;
@ViewChild('child2') profileImage2: ProfileImageComponent;
@ViewChild('child3') profileImage3: ProfileImageComponent;

updateProfile() {
    ...
    this.profileImage1.updateAvatar();
    this.profileImage2.updateAvatar();
    this.profileImage3.updateAvatar();
  }