如何在Angular中创建和解雇自定义事件

Question

我是新来的，我已经阅读了事件绑定，因此我可以做这样的事情：

<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>

和父型文件

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

Answer 2

您应该查看父母的Angular的文档示例：：

您使用@Output()装饰器声明类属性，然后将其实例化到新的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 Framework中的对象。

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

Answer 4

@Output() loaderStatus= new EventEmitter<{Status:boolean}>(); Status=true; 
this.loaderEvent.emit({Status=false});