时间戳

首页 > 解决方案 > 如何在角材料中的 Snackbar 上添加 html 内容？

angular-material - 如何在角材料中的 Snackbar 上添加 html 内容？

问题描述

我为响应消息创建了烤面包机（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 = '<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. 大家好！

我想要这个东西在 toster(snackbar)

需要这样的输出，应该在html表内容中

标签： angular-materialangular5

解决方案

正如 Edric 在他的评论/链接中提到的那样，您将无法创建自定义 SnackBar 组件。标准 Angular Material SnackBars 只允许您设置一个message和action（以及一些配置选项）。

检查这个stackblitz 以获得一个非常基本的 SnackBar 组件，它从传递给它的 HTML 字符串中读取一个 HTML 字符串，data并将字符串内容呈现为小吃栏中的 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>'
    }
  });
}

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

推荐阅读