javascript - Angular EventEmitter med Callback

Jag vill skapa en anpassad knappkomponent i min Angular-applikation och jag har en metod för att implementera klick, här är koden:

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

Problemet är att när användaren klickar på knappen kommer 'active' att vara true och händelsen kommer att köras, men 'active' kommer att vara false utan att vänta på att händelsen ska slutföras. Jag vill att 'active' ska vara false när händelsen är helt utförd.

hur kan jag fixa detta eller hur kan jag lägga till Callback till emit-metoden?

Svar #1

Du kan prenumerera på EventEmitters:

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

Det skulle ge dig

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

Svar #2

Eftersom Active är en Input, varför inte ändra dess värde från föräldrakomponenten. Jag menar, du kan flytta this.active =false; från MyButtonComponent till din HostComponent inuti metoden som hanterar din Output

Relaterade artiklar