在 primeng p-toast 中使用 html

Question

我想在 primeng toast 模块中使用 html 代码
。我尝试了不同的选项，但无法正常工作。

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

有什么建议吗？

Answer 1

您不能在 MessageService 的详细信息中使用 HTML，因为它不会呈现 HTML。如果你想要多行，你唯一的选择是利用 ng-template 来构建你想要的对话框。

Answer 2

实际上你可以在 CSS 中打勾，在你的主 sylesheet 中声明：

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

现在您的 \n 将在消息中起作用:)

Answer 3

创建变量以将您的数据绑定到其中，并在调用您的函数时像这样调用它并确保详细信息为空

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 4

为了在 p-toast 中使用 HTML 内容，您可以使用非常简单的自定义消息模板。

<p-toast position="top-center">
    <ng-template let-message pTemplate="message">
        <p innerHtml="{{message.detail}}"></p>
    </ng-template>
</p-toast>

不需要额外的变量，模板使用 Primeng 组件原生的消息变量。

Answer 5

您可以让它在 html 定义中添加以下内容：

<p-toast [style]="{'white-space': 'pre-line'}" ></p-toast>

您可以在组件中尝试使用以下代码：

let arrays: string[] = ['first line', 'second line'];
    this.messageService.add({ summary: 'Title',  detail:  arrays.join('\n'), severity: 'warn', sticky: true });

此致。

在 primeng p-toast 中使用 html

use html in primeng p-toast

toast

primeng

angular