クリックイベントが発生していないアニメーショントリガーで状態変更が可能ですか？

Question

私のアニメーショントリガーには、3つの状態： Void、Trueおよびfalseがあります。

サブスクリプションを使用して、いずれかの変数に変更があるかどうかを確認しています。変更がある場合は、真のポップアップへの状態変化は、次のアニメーションごとのように表示されます。

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

私は、このポップアップは任意のクリックイベントや変更をトリガすることなく、短時間（1秒）の後に消えたいです。

あなたのサブスクリプションの件名を使用し、それに2回を購読することができ

Answer 1

：近く続い

• 1時間を例えば、1000年のデバウンス時間変更に
• 1時間をキャッチするために、そしてあなたのモーダル

これは一例です：

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