Вы не сможете обойтись без создания собственного компонента SnackBar, как упомянул Эдрик в своем комментарии / ссылке.Стандартные угловые материалы SnackBars позволяют устанавливать только message
и action
(а также некоторые параметры конфигурации).
Проверьте этот stackblitz для очень элементарного компонента SnackBar, который читаетHTML-строка из data
, переданного ей, и отображает содержимое строки в виде HTML в снэк-баре.
snackbar.component.ts
export class SnackbarComponent {
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any,
public snackBar: MatSnackBar) {
}
}
snackbar.component.html
<div [innerHTML]="data.html"></div>
<button mat-raised-button (click)="snackBar.dismiss()">Dismiss</button>
Используйте компонент следующим образом:
openSnackbar() {
this.snackBar.openFromComponent(SnackbarComponent, {
data: {
html: '<h1>The Header</h1><p>The paragraph of text</p>'
}
});
}
Вы можете легко обернуть его в сервис, если это то, что вам нужно.