Как добавить HTML-контент на Snackbar в угловой материал? - PullRequest
0 голосов
/ 28 декабря 2018

Я создал тостер (снэк-бар) для ответного сообщения.Я хочу добавить 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 уже были введены 27 ноября 2018 года.

  1. Hello world!
  2. Привет, люди!

Я хочу эту вещь в тостере (закусочная)

Need Output like this which should be in html table Content

1 Ответ

0 голосов
/ 28 декабря 2018

Вы не сможете обойтись без создания собственного компонента SnackBar, как упомянул Эдрик в своем комментарии / ссылке.Стандартные угловые материалы SnackBars позволяют устанавливать только message и action (а также некоторые параметры конфигурации).

Проверьте этот stackblitz для очень элементарного компонента SnackBar, который читаетHTML-строка из data, переданного ей, и отображает содержимое строки в виде 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>'
    }
  });
}

Вы можете легко обернуть его в сервис, если это то, что вам нужно.

...