带回调的角度事件发射器

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

问题是当用户单击按钮时，"活动"将为真，事件将执行，但"活动"将为假，而无需等待事件完成。我希望"活动"在事件完全执行时为 false。

如何解决此问题或如何将回调添加到 emit 方法？

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

既然活动是输入，为什么不从父组件更改它的值。我的意思是你可以将this.active = false;从MyButtonComponent移动到处理输出的方法中的HostComponent。