javascript - 带有回调的 Angular EventEmitter

Question

我想在我的角度应用程序中制作自定义按钮组件，并且我有一个方法来实现点击，这里是代码：

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

问题是当用户单击按钮时，“活动”将为真并且事件将执行，但“活动”将在不等待事件完成的情况下为假。当事件完全执行时，我希望“活动”为假。

我该如何解决这个问题，或者如何将回调添加到发出方法？

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);
  }
}

Answer 2

由于 Active 是 Input 为什么不从父组件更改它的值。我的意思是你可以移动this.active = false; 在处理输出的方法中从MyButtonComponent到 HostComponent