Question

我正在尝试更改快餐栏消息中的一些数据，但是消息没有改变。

这是我正在尝试做的一个小例子：

https://stackblitz.com/edit/angular-snackbar-qvxipb?file=app%2Fapp.component.html

Desirable Behavior: 
Redirecting in 3s -> Redirecting in 2s -> Redirecting in 1s

有人可以帮助我吗？谢谢。

编辑：无需打开多个小吃店。

Answer 1

我知道'MatSnackBar'可能有问题。他们会出现并消失，不知道是否有防止这种情况的配置，因此我使用指令使用解决方案发布了答案。

component.ts

export class SnackTimerComponent {

  timer: number = 5
  message: string

  startCountdown() {
    this.timer = 5
    let interval = setInterval(() => {
      if (this.timer != 0) {
        this.timer--
        console.log(this.timer);
        this.message = `Redirecting in ${this.timer}s...`;
      } else {
        clearInterval(interval)
        this.message = null
      }
    }, 1000);
  }

}

directive.ts

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[snack-bar-timer]'
})
export class SnackBarTimerDirective {

  @Input() color: string = "#b5e7a0"

  constructor(el: ElementRef) {
    const style = el.nativeElement.style
    style.backgroundColor = this.color
    style.position = "absolute"
    style.left = "50%"
    style.bottom = "0"
    style.transform = "translateX(-50%)"
    style.padding = "20px"
    style.margin = "12px"
    style.width = "fit-content"
    style.borderRadius = "8px"
  }

}

component.html

<button (click)="startCountdown()">Start countdown</button>
<div *ngIf="message" snack-bar-timer>{{message}}</div>

小吃店消息不会实时更改

1 个答案: