如何在 Angular 材质的 Snackbar 上添加 html 内容？

问题描述 投票：0回答：2

我已经创建了烤面包机（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 日的价格。

  1. 世界你好！
  2. 大家好！

我想把这个东西放进烤面包机（小吃店）

angular-material angular5
2个回答
18
投票

您将无法像 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>'
    }
  });
}

如果您需要的话，您可以轻松地将其包装在服务中。

0
投票

像这样使用组件：

openSnackbar() {
    this.snackBar.openFromComponent(SnackbarComponent, {
        data: {html: '<h1>The Header</h1><p>The paragraph of text</p>'},
        **duration: 20000, verticalPosition: 'bottom', panelClass: ['error-snackbar']**
    });
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.