2017-10-17 2 views
0

Wenn der Benutzer auf eine Schaltfläche klickt, gibt es eine Anweisung, die dieses Ereignis abfängt und stoppt. Dann wird ein Modal geöffnet, das nach Benutzerbestätigung fragt. Wenn der Benutzer bestätigt, muss ich das vorherige Ereignis fortsetzen.Angular, Fortsetzen der Ereignisfortpflanzung

Wie setze ich das gestoppte Ereignis fort?

Beispiel:

markAsSeen($event) : void { 

    // pause whatever user wanted to click 
    $event.stopPropagation(); 

    // open modal and ask user for confirmation 
    let modalInstance = this.modalService.openConfirmationModal(); 

    // on modal close, if positive event continue whatever user clicked 
    modalInstance.onClose((response) => { 
     if(response) { 
      // this line should resume $event 
      $event.originalEvent(); // how to achieve this? 
     } 
    }) 
} 
+0

könnten Sie ein wenig mehr Ihre Bedürfnisse darstellen? – Stefdelec

+0

Überprüfen Sie bitte bearbeiten, ich brauche etwas wie diese Frage, aber mit eckigen 4 ^: https://StackOverflow.com/Questions/7811959/How-to-Continue-Event-Propagation-after-cancelling – Mardari

+1

Sie können das Ereignis erneut auslösen Wie in https://stackoverflow.com/questions/36639486/angular2-manual-firing-click-event-on-particular-element/36639596#36639596 –

Antwort

1

Für mich zwei verschiedene Ereignisse ist, die erste hier zu openModal ist aber sieht nutzlos (?, Warum Sie nicht nur eine modale geöffnet), der zweite zur Bestätigung wenn der Benutzer auf Bestätigen geklickt hat.

Für mich ist das der einfachste Weg: Wenn Sie den ersten Event-Emitter benötigen, dann öffnen Sie nur das Modal, der zweite startet den Bestätigungsprozess, wenn positiv. Der andere Weg könnte darin bestehen, eine "Status" -Variable in Ihrer Bestätigung hinzuzufügen -1 für nicht gestartet (= modal geschlossen), 1 für eine positive Bestätigung, 0 in Bearbeitung.

Schließlich Benutzer zu vermeiden, weg zu klicken, verwenden Sie so etwas wie

onClick(event) { 
if (!this.element.nativeElement.contains(event.target)) { 
     closeModal(); // or not 
    } 
} 

Wo event.target angeklickten Ziel

Edit ist: onClick muss

@Component({selector..., host: { 
    '(document:click)': 'onClick($event)', 
    }}); 
@Component hinzugefügt werden