используйте HTML в primeng p-toast

Question

Я хотел бы использовать HTML-кодв основном тост модуля.Я пробовал разные варианты, но не могу заставить его работать.

this.messageService.add({ sticky: true, severity: 'error', summary: 'Import job', detail: 'first line of text <br\>second line of text'});

кто-нибудь предлагает?

Answer 1

На самом деле вы можете сделать небольшую галочку в CSS, объявив это в своей основной таблице:

.ui-toast-detail {
   white-space: pre-line;
}

Теперь ваш \n будет работать в сообщении:)

Answer 2

сделать переменную, чтобы связать ваши данные в ней, и когда вы вызываете свою функцию, вызовите ее так и убедитесь, что детали пусто

descreption : string = '';

showInfo(descreption) {
  this.descreption = descreption;
  this.messageService.add({severity: 'info', summary: 'samary', detail:''});
}

, а в html используйте ng-template и свяжите ваши данные, используя innerHtml ипередайте свою переменную вот так

  <p-toast [style]="{marginTop: '80px'}" styleClass="custom-toast">
      <ng-template let-message pTemplate="message">
        <div style="text-align: center">
          <p  innerHtml="{{descreption}}"></p>
        </div>
      </ng-template>
  </p-toast>

Answer 3

Вы не можете использовать HTML в деталях MessageService, потому что он не будет отображать HTML.Единственный вариант, если вам нужно несколько строк, - это использовать ng-шаблон для построения диалога, как вы хотите.