Ist eine Statusänderung in Animationsauslösern ohne Klickereignis möglich?

Question

Mein Animationstrigger hat drei Zustände: Void, True und False.

Ich verwende ein Abonnement, um zu überprüfen, ob sich eine der Variablen geändert hat. Wenn es eine Änderung gibt, Zustandsänderungen wahr und Popup erscheinen wie in der folgenden Animation:

animations: [ 
     trigger('visibilityChanged', [ 
      state('void' , style({ opacity: 0})), 
      state('true' , style({ opacity: 1})), 
      state('false', style({ opacity: 0})), 
      transition('* => *', animate('.5s')) 
     ]) 
    ] 

ich das Popup nach kurzer Zeit verschwinden will (1 s), ohne ein Click-Ereignis oder eine Änderung auslöst.

Answer 1

Sie einen Betreff für Ihr Abonnement nutzen könnten und dann abonnieren zweimal, um es:

• eine Zeit, um die Änderung der Nähe für den Fang
• eine Zeit für eine Entprellzeit von 1000, zum Beispiel, und dann Ihre modal

Dies ist ein Beispiel:

import {Component, OnInit} from '@angular/core'; 
import {Subject} from 'rxjs/Subject'; 

@Component({ 
    selector: 'selfclosing-popup', 
    templateUrl: 'etc.' 
    animations: [ 
    trigger('visibilityChanged', [ 
     state('void' , style({ opacity: 0})), 
     state('true' , style({ opacity: 1})), 
     state('false', style({ opacity: 0})), 
     transition('* => *', animate('.5s')) 
    ]) 
    ] 
}) 
export class SelfclosingPopup implements OnInit { 
    changeSubject = new Subject<boolean>(); 
    visibilityChanged: string;  

    ngOnInit(): void {  
    this.changeSubject.subscribe((change) => this.visibilityChanged = change); 
    this.changeSubject.debounceTime(1000).subscribe(() => this.visibilityChanged = false); 
    } 

    public notifyChange() { 
    this.changeSubject.next(true); 
    } 
}