我已经创建了烤面包机(snackbar)来响应消息。 我想在烤面包机(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 = '<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
(以及一些配置选项)。
检查 this stackblitz 是否有一个非常基本的 SnackBar 组件,该组件从传递给它的
data
读取 HTML 字符串,并将字符串内容在小吃栏中呈现为 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() {
this.snackBar.openFromComponent(SnackbarComponent, {
data: {html: '<h1>The Header</h1><p>The paragraph of text</p>'},
**duration: 20000, verticalPosition: 'bottom', panelClass: ['error-snackbar']**
});
}