Angular应用里child Component如何向parent Component发送事件

时间:2022-07-23
本文章向大家介绍Angular应用里child Component如何向parent Component发送事件，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

detail Component里，使用event binding，给button click事件注册一个处理函数delete：

<img src="{{itemImageUrl}}" [style.display]="displayNone">
<span [style.text-decoration]="lineThrough">{{ item.name }}
</span>
<button (click)="delete()">Delete</button>
@Output() deleteRequest = new EventEmitter<Item>();

delete() {
  this.deleteRequest.emit(this.item);
  this.displayNone = this.displayNone ? '' : 'none';
  this.lineThrough = this.lineThrough ? '' : 'line-through';
}

在delete函数里，使用EventEmitter发送一个事件。deleteRequest这个property需要加上@Output的注解。

在parent Component里，监听从child Component发送过来的自定义事件：

<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>

随机文章
Javascript知识点必读
最近更新