Angular Material自定义SnackBar间隔改背景色失效求助

你的代码无法实现预期效果的核心原因有两个：

1. 局部变量isLoading的修改不会同步到已创建的SnackBar实例——SnackBar初始化时就根据当时的isLoading值确定了panelClass，后续局部变量的变化不会触发样式更新。
2. 将setTimeout放入ngOnInit报错，是因为isLoading是openSnackBar函数的局部参数，并非组件类的属性，组件类无法直接访问该变量。

以下是两种可行的解决方案：

方案一：让自定义SnackBar组件内部管理状态（推荐） #

这种方式符合Angular组件化思想，通过组件内部状态切换样式，无需直接操作DOM。

1. 调用方组件代码 #

openSnackBar(isLoading: boolean = true) { 
  this._snackBar.openFromComponent(SnackbarComponent, {
      duration: 5000,
      data: { isLoading: isLoading } // 通过data传递初始状态给SnackBar组件
  });
}

2. 自定义SnackbarComponent代码 #

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

@Component({
  selector: 'app-snackbar',
  template: `
    <div [ngClass]="{'greenClass': isLoading, 'blueClass': !isLoading}">
      <!-- 这里放置你的SnackBar内容 -->
    </div>
  `,
  styles: [`
    .greenClass { background-color: #4caf50; }
    .blueClass { background-color: #2196f3; }
  `]
})
export class SnackbarComponent implements OnInit {
  isLoading: boolean;

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
    this.isLoading = data.isLoading; // 接收初始状态
  }

  ngOnInit() {
    setTimeout(() => {
      this.isLoading = false; // 2秒后切换状态，触发样式变化
    }, 2000);
  }
}

方案二：直接操作SnackBar实例的DOM（备选） #

如果不想修改自定义SnackBar组件，可以通过获取SnackBar实例，直接操作其DOM元素切换样式，但这种方式不推荐作为长期方案（直接操作DOM不符合Angular最佳实践）。

openSnackBar(isLoading: boolean = true) { 
  const snackBarRef = this._snackBar.openFromComponent(SnackbarComponent, {
      duration: 5000,
      panelClass: isLoading ? "greenClass" : "blueClass",
  });

  setTimeout(() => {
    // 移除旧样式类，添加新样式类
    const snackBarElement = snackBarRef._containerInstance._elementRef.nativeElement;
    snackBarElement.classList.remove("greenClass");
    snackBarElement.classList.add("blueClass");
  }, 2000);
}

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