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' 将为真并且事件将执行，但是 'active' 将为假而不等待事件 finish.I 想要 'active' 事件完全执行时为 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

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

Angular 带回调的 EventEmitter

Angular EventEmitter with Callback

javascript

callback

typescript

angular

angular-event-emitter