如何在 angular 中创建和触发自定义事件

Question

我是 Angular 的新手，我已经阅读了有关事件绑定的内容，所以我可以这样做：

<button (click)="doSomething()"></button>

我想知道是否可以创建自定义事件并执行相同的操作。假设我想要一个自定义事件，例如：deleteItem，是否可以这样做？又如何？

<my-component (deleteItem)="doSomething()"></my-component>

Answer 1

当然，您可以使用 eventEmitter 在 my-component ts 文件中添加这个

 @Output() deleteItem= new EventEmitter();

当您想发起活动时，请执行此操作

  this.deleteItem.emit();

你也可以像这样传递数据

  this.countUpdate.emit({value: some data });

然后像这样在父组件中捕获它

<my-component (deleteItem)="doSomething($event)"></my-component>

并且在父ts文件中

    doSomething(event)
    { 
       console.log(event);
    }

Answer 2

您应该查看 Angular 的文档示例，了解 父级监听子级事件:

您使用 @Output() 装饰器声明一个 class 属性并将其实例化为一个新的 EventEmitter 实例。

示例来自 Angular docs

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="didVote">Agree</button>
    <button (click)="vote(false)" [disabled]="didVote">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }
}

请记住，如果 EventEmitter 发出值，始终将泛型类型添加到它是一个好习惯。

如果一个事件发出一个布尔值，你应该用 @Output() eventName = new EventEmitter<boolean>();

实例化它

上面的组件可以在 <app-voter (voted)="handleVote($event)"></app-voter>

的父组件中使用

Answer 3

EventEmitter 可用于创建您自己的自定义事件，eventemitter 是 angular 框架中的对象。

@Output() deleteItem= new EventEmitter<{itemName:string}>(); ItemName=''; this.deleteItem.emit({ItemName=this.itemName});

如何在 angular 中创建和触发自定义事件

How to create and fire a custom event in angular

javascript

angular

angular-event-emitter