angular – 如何通知parent有关子组件的更改？

发布时间：2020-12-17 06:54:50 所属栏目：安全来源：网络整理

导读：我有一个带有此模板的子组件： p *ngIf="user != null" Id: {{user.id}}br Name: {{user.firstName}} {{user.lastName}}br Nick: {{user.nickname}}br Gender: {{user.gender}}br Birthday: {{user.birthday}}br Last login: {{user.lastUpdateDate}}br Regi

我有一个带有此模板的子组件：

<p *ngIf="user != null" >
    Id: {{user.id}}<br>
    Name: {{user.firstName}} {{user.lastName}}<br>
    Nick: {{user.nickname}}<br>
    Gender: {{user.gender}}<br>
    Birthday: {{user.birthday}}<br>
    Last login: {{user.lastUpdateDate}}<br>
    Registered: {{user.registrationDate}}<br>
</p>

我使用http请求从服务器获取用户,因此在加载数据时,将显示用户.

如何通知父组件数据已加载并显示？

解决方法

只需在子组件中使用EventEmitter(此示例适用于click事件,您可以随时发出事件).

@Component({
  selector: 'child-component',template: `
    <button (click)="changeStatus(true)">Finish</button>
  `
})
export class ChildComponent {
  @Output() onStatusChange = new EventEmitter<boolean>();

  changeStatus(finished: bool) {
    this.onStatusChange.emit(finished);
    ...
  }
}

@Component({
  selector: 'parent-component',template: `
    <child-component
      (onStatusChange)="childStatusChanged($event)">
    </child-component>
  `
})
export class ParentComponent {
  childStatusChanged(finished: boolean) {
    if (finished){
      ...
    }
    ...
  }
}

当您单击Finish按钮时,它将调用子changeStatus方法,在该方法中我们发出子onStatusChange事件.它可能在父级中捕获,如父组件的模板中所示.这将调用childStatusChanged方法,您可以在其中执行任何操作.

看到
??Component Interaction
文章于Angular.io docs获取更多信息

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!