Angular Material：Snack Bar内嵌进度条倒计时更新异常问题

你遇到的核心问题是RxJS的interval默认运行在Angular的NgZone之外，导致组件的变更检测机制没有被触发——虽然控制台里countdown一直在增长，但视图绑定的值不会自动更新。下面给你两种可靠的解决方案：

方案一：用NgZone强制触发变更检测 #

通过注入NgZone，把interval的回调包裹在zone.run()里，让Angular感知到变量变化并更新视图：

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import { interval, Subscription } from 'rxjs';

export class PizzaPartyComponent implements OnInit, OnDestroy {
  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
    private ngZone: NgZone
  ) { }

  intervalSubscription?: Subscription;
  countdown: number = 0;
  // 对应Snackbar的5秒时长，100ms一次间隔，总共50次tick
  totalTicks = 50;

  ngOnInit() {
    const source = interval(100);
    this.intervalSubscription = source.subscribe(val => {
      this.ngZone.run(() => {
        this.countdown += 1;
        console.log("Interval", val, " - ", this.countdown);
        
        // 到达总时长后自动取消订阅，避免内存泄漏
        if (this.countdown >= this.totalTicks) {
          this.intervalSubscription?.unsubscribe();
        }
      });
    });
  }

  ngOnDestroy(): void {
    console.log("Snackbar Destroyed")
    this.intervalSubscription?.unsubscribe();
  }

  // 计算进度条的百分比（从100降到0）
  get progressPercentage(): number {
    return ((this.totalTicks - this.countdown) / this.totalTicks) * 100;
  }
}

对应的模板代码：

<div class="snackbar-content">
  <span>{{ data.message }}</span>
  <mat-progress-bar mode="determinate" [value]="progressPercentage"></mat-progress-bar>
</div>

方案二：用Async管道（更简洁推荐） #

利用Angular的async管道自动处理Observable的订阅和变更检测，无需手动管理订阅：

import { Component, OnInit } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import { interval, take, map } from 'rxjs';

export class PizzaPartyComponent implements OnInit {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }

  // 对应5秒时长的总tick数
  totalTicks = 50;
  // 直接生成进度百分比的Observable
  progress$?: Observable<number>;

  ngOnInit() {
    this.progress$ = interval(100)
      .pipe(
        take(this.totalTicks), // 只取50次，刚好覆盖5秒
        map(tick => ((this.totalTicks - tick) / this.totalTicks) * 100)
      );
  }
}

对应的模板代码：

<div class="snackbar-content">
  <span>{{ data.message }}</span>
  <mat-progress-bar mode="determinate" [value]="progress$ | async"></mat-progress-bar>
</div>

为什么原代码会出问题？ #

RxJS的interval默认使用async调度器，这个调度器脱离了Angular的NgZone上下文。当countdown在回调里更新时，Angular的变更检测系统不会收到通知，所以视图不会同步更新——这就是为什么控制台日志正常，但页面上的数值只更新到2就停滞的原因。

内容的提问来源于stack exchange，提问作者DevEng