typescript - Hvordan kalle en Angular-funksjon når man klikker på lukk (X)-knappen i p-dialog?

Hvordan kalle en Angular-funksjon når man klikker p-dialog lukke (X)-knappen?

Jeg har søkt og nettopp prøvd dette (onHide)="cancel()". Men det fungerer ikke. Vennligst del dine løsninger.

Jeg vet at vi kan bruke en lukk/avbryt-knapp for å skjule popup-vinduet. Men i mitt scenario vil jeg kalle en hendelse når (X)-knappen klikkes.

Svar #1

Faktisk fungerer (onHide)="cancel()" fint ifølge denne Plunkr.

Svar #2

Det finnes en enkel løsning, som ikke er dokumentert i dokumentasjonen, men som jeg fant i dette problemet. Du trenger bare å dele toveis bindingen inn i enveismating ved å bruke visible og visibleChange egenskaper slik:

 <p-dialog header="My dialog" 
  [visible]="showDialog$ |async" 
  (visibleChange)="handleClose()"
 >

Ovenfor bruker jeg Angulars async-pipe for å vise dialogen og handleClose()-metoden for å lukke dialogen. I .ts-filen kan jeg ha en tjeneste injisert som bruker en observale av boolsk verdi som endres basert på en eller annen betingelse.

export class HomeComponent implements OnInit {

  showDialog$!: Observable<boolean>;

  constructor(private homeService: HomeService) { }

  ngOnInit(): void {
    this.showDialog$ = this.homeService.displayDialog$;
  }
  handleClose() {
    this.homeService.toogleDisplayDialog();
  }
}