Angular Material Snackbar 默认情况下会覆盖先前的消息并显示新的消息。如果你想要不覆盖先前的消息而是显示新的消息,可以使用 MatSnackBar
的 openFromComponent
方法和一个自定义的组件来实现。
首先,创建一个自定义的组件,例如 CustomSnackbarComponent
:
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
@Component({
selector: 'app-custom-snackbar',
template: `
{{ data.message }}
`,
})
export class CustomSnackbarComponent implements OnInit {
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {}
ngOnInit() {}
}
然后,在你的组件中使用 MatSnackBar
的 openFromComponent
方法来显示 Snackbar:
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CustomSnackbarComponent } from './custom-snackbar.component';
@Component({
selector: 'app-example-component',
template: `
`,
})
export class ExampleComponent {
constructor(private snackBar: MatSnackBar) {}
showSnackbar() {
this.snackBar.openFromComponent(CustomSnackbarComponent, {
data: { message: 'New message' },
duration: 3000, // 持续时间,单位毫秒
});
}
}
在上面的示例中,我们使用 MatSnackBar
的 openFromComponent
方法来打开 Snackbar,并将 CustomSnackbarComponent
作为组件传递给它。我们还通过 data
属性将消息传递给自定义组件。这样,每次调用 showSnackbar
方法时,都会显示一个新的 Snackbar 消息,而不会覆盖先前的消息。