没有任何点击事件，动画触发器中的状态更改是否可行

Question

我的动画触发器有三种状态： 虚空，真与假。

我正在使用订阅来检查其中一个变量是否有变化。如果有更改，则状态更改为true，并按照以下动画显示弹出窗口：

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

我希望此弹出窗口在短时间（1秒）后消失，而不会触发任何点击事件或更改。

Answer 1

您可以使用主题进行订阅，然后订阅两次：

• 一次抓住变化
例如，
• 一次去抖动时间为1000，然后关闭你的模态

这是一个例子：

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