如何在有角度的材料中在 Snackbar 上添加 html 内容？
我为响应消息创建了烤面包机（小吃店）。我想在烤面包机（小吃店）上添加一个 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 = '<html> <body>' + '<h1>The Header</h1>' + '<p>The paragraph of text</p>' + '</body> </html>';
this._toastr.error(test);
输出应为：- 以下 xxx/xxx 的价格已于 2018 年 11 月 27 日输入。
- 你好，世界！
- 大家好！
我想要这个东西在烤面包机（小吃店）
您不会像 Edric 在他的评论/链接中提到的那样创建自定义 SnackBar 组件。标准 Angular Material SnackBars 只允许您设置message和action（以及一些配置选项）。
检查此stackblitz 中是否有一个非常基本的 SnackBar 组件，该组件从data传递给它的对象中读取 HTML 字符串并将字符串内容呈现为小吃栏中的 HTML。
小吃店.component.ts
export class SnackbarComponent {
constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any,
public snackBar: MatSnackBar) {
}
}
小吃店.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>'
}
});
}
如果这是您需要的，您可以轻松地将其包装在服务中。
| 归档时间： |
|
| 查看次数： |
7571 次 |
| 最近记录： |