在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

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

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

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

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

您可以让它在 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 });

问候。