angular - 如何将子组件的更改通知父级?

标签 angular typescript

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

<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(此示例使用点击事件,您可以随时发出该事件)。

@Component({
  selector: 'child-component',
  template: `
    <button (click)="changeState(State.FINISHED)">Finish</button>
  `
})
export class ChildComponent {
  @Output() stateChanged = new EventEmitter<State>();

  changeState(state: State) {
    this.stateChanged.emit(state);
    ...
  }
}

@Component({
  selector: 'parent-component',
  template: `
    <child-component
      (stateChanged)="onStateChange($event)">
    </child-component>
  `
})
export class ParentComponent {
  onStateChange(state: State) {
    ...
  }
}

当您单击 Finish 按钮时,它会调用 changeState 方法,其中会发出 stateChange 事件。可以像在父组件的模板中看到的那样收听它。这将调用 onStateChange 方法,您可以根据需要对事件使用react。

Component Interaction 文章 Angular.io docs了解更多信息

关于angular - 如何将子组件的更改通知父级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40516500/

相关文章:

javascript - 对于具有自己的 props 的连接组件的 TypeScript 警告

typescript - 是否可以在 TypeScript 中精确键入 _.invert?

angular - 用管道控制 Observables

typescript - 推断 Typescript 中深度嵌套对象的非叶节点类型

javascript - Ionic 3 Angular Fire Payload.val() 返回 null

javascript - 使用ngif ionic4过滤ngfor中的json数据

angular - 如何在 ion-item 中使用 *ngFor 以便每个都有单独的功能

angular - 如何使用highcharts-angular回调函数获取图表对象

typescript - 我应该如何在 typescript 中进行枚举比较

typescript - 从 "@angular"而不是 "angular2"导入 { * }