Angular material 如何在angular material中的Snackbar上添加html内容？_Angular Material_Angular5

Angular material 如何在angular material中的Snackbar上添加html内容？

angular-material

Angular material 如何在angular material中的Snackbar上添加html内容？,angular-material,angular5,Angular Material,Angular5,我已经为响应消息创建了烤面包机（snackbar）。我想在toaster（snackbar）上添加一个html内容，以便以适当的格式显示多条消息我已经试过了 var test ='<html> <body>' + '<h1>The Header</h1>' + '<p>The paragraph of text</p>' + '</body> </html>'; this._toastr

我已经为响应消息创建了烤面包机（snackbar）。我想在toaster（snackbar）上添加一个html内容，以便以适当的格式显示多条消息

我已经试过了

var test ='<html> <body>' + '<h1>The Header</h1>'  +  '<p>The paragraph of text</p>' + '</body>  </html>';


this._toastr.error(test);
 _toastr : is my service.
 .error  : is my function in which I have to pass htmlContent

var-test=''+'标题'+'文本段落'+'；
此错误（测试）；
_托阿斯特：这是我的服务。
.error:是我必须传递htmlContent的函数

我的代码

var test = '<html> <body>' + '<h1>The Header</h1>'  +  '<p>The paragraph of text</p>' + '</body>  </html>';

this._toastr.error(test);

var-test=''+'标题'+'文本段落'+'；
此错误（测试）；

输出应为：- 以下xxx/xxx的价格已于2018年11月27日输入

你好，世界

大家好我想把这东西扔进垃圾桶（snackbar）

您将无法像Edric在评论/链接中提到的那样创建自定义SnackBar组件。标准的角度材质快捷键仅允许您设置

消息

和

操作

（以及一些配置选项）

检查stackblitz，了解最基本的SnackBar组件，该组件从传递给它的

数据中读取HTML字符串，并在SnackBar中将字符串内容呈现为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>'
    }
  });
}

openSnackbar（）{
这个.snackBar.openFromComponent（snackBar组件{
数据：{
html:“标题文本的段落”
}
});
}

如果您需要的话，您可以很容易地将其包装在服务中。
可能重复编号。这是不同的。不能有多个
和
元素。它们只能指定一次。它将忽略内联样式