在 angular 中弹出倒计时

Question

我正在开发一个 angular 应用程序。 如附图所示，我想随时间弹出一个窗口。 它应该在 3 比 2 比 1 之后显示像 4 的时间。这意味着时间应该在屏幕上每秒更改一次，并且右上角的关闭按钮。 并且 pop 应该在时间结束后自动关闭。 弹出图像

Answer 1

假设pop-up作为一个组件添加到父组件中：

在弹出 controller

  counter = 5;
  interval: any;
  ngOnInit() {
    this.interval = setInterval(() => {
      (this.counter !== 0) ? this.counter -= 1 : this.close();
    }, 1000);
  }
  close() {
    clearInterval(this.interval);
    //emit some triggering event 
    // use @Output() 
  }

使用counter值作为字符串插值，即{{counter}}

在父组件 HTML

<div *ngIf='condition'>
    <pop-up (trigger)='condition=false'></pop-up>
</div>