带有回调函数的Angular EventEmitter

Question

我想在我的Angular应用程序中制作自定义按钮组件，我有一种实现点击的方法，以下是代码：

export class MyButtonComponent {
  @Input() active: boolean = false;
  @Output() btnClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

  @HostListener('click', ['$event'])
  public async onClick(event: MouseEvent) {
      this.active = true;
      await this.btnClick.emit(event);
      this.active = false;
  }
}

问题在于，当用户点击按钮时，“active”将变为“true”并执行事件，但是在等待事件完成之前，“active”将变为“false”。我希望在事件完全执行时将“active”设置为“false”。

我该如何解决这个问题或如何在emit方法中添加回调？

- Mohammad Abbasi

Answer 1

您可以订阅EventEmitters：

this.btnClick.subscribe(() => this.active = false);

那会给你

export class MyButtonComponent implements OnInit {
  @Input() active: boolean = false;
  @Output() btnClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent) {
      this.active = true;
      this.btnClick.emit(event);
  }
  
  ngOnInit() {
    this.btnClick.subscribe(() => this.active = false);
  }
}

- Alex

---

为什么这是被认可的答案？这对我没有用，订阅仍然在发出事件之前执行。 - Simon Lapointe

你可以在 EventEmitter 的内容上进行过滤：this.btnClick.pipe(filter(event => !!event)).subscribe(() => this.active = false); - Alex

Answer 2

由于Active是一个输入，为什么不从父组件更改它的值呢？我的意思是，您可以将this.active = false;从MyButtonComponent移动到您的HostComponent中，在处理Output的方法内部。

- ilyas shabi