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

问题是当用户单击按钮时，“活动”将为true，事件将执行，但是“活动”将为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

由于Active是输入，为什么不从父组件更改其值。我的意思是，您可以将 this.active = false; 从 MyButtonComponent 移动到用于处理 Output

的方法内的HostComponent上

带回调的Angular EventEmitter

2 个答案: