间隔后改变风格的棱角分明的材料小吃店

Question

我已经创建了一个自定义的有角度的材料小吃条，我想在一段时间后(在它关闭之前(更改它的背景颜色。到目前为止，我已经尝试了以下代码，但背景颜色并没有像预期的那样改变。我是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'

Answer 1

代码的问题是属性'isLoading'不是snakebar的属性(它直接在dom中打开(。

您可以通过使用dom查询选择器来实现这一点

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示例