间隔后改变角形材料小吃店的风格

【问题标题】：Changing styles of angular material snack-bar after interval间隔后改变角形材料小吃店的风格
【发布时间】：2022-09-28 00:31:11
【问题描述】：

我已经创建了一个自定义角度材料小吃栏，我想在一段时间后（在它关闭之前）更改它的背景颜色。到目前为止，我已经尝试了以下代码，但背景颜色并没有按预期改变。我是 Angular 的新手...任何建议将不胜感激，谢谢。

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

  setTimeout(() => {
    isLoading = false;
  }, 2000);
}

我试图将 setTimeout 函数放在 ngOnInit() 中，但出现错误：Property \'isLoading\' does not exist on type \'SnackbarButtonComponent\'

标签： angular angular-material snackbar

【解决方案1】：

您的代码的问题是属性“isLoading”不是蛇条的属性（直接在 dom 中打开）。

您可以通过使用 dom queryselector 来实现这一点

openSnackBar() {
    this._snackBar.openFromComponent(SnackbarComponent, {
      duration: 5000,
      panelClass: ['panelClass'],
    });
    setTimeout(() => {

       let mysnackbar: any = document.querySelectorAll('.panelClass')[0]; // querying out our panelClass
       mysnackbar.style.cssText += 'background-color: #9b8b8b !important'; // changing value
   
    }, 2000);
  }

记得在你的全局样式（styles.css 文件）中添加 panelClass。

.panelClass {
  background-color: pink; // initial background color
}

我创建了一个 stackblitz 示例here。请点赞 && 选择是否有帮助

【讨论】：