Question

我想在primeng吐司模块中使用html代码
。我尝试了其他选择，但无法正常工作。

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

有人建议吗？

Answer 1

make变量将数据绑定到其中，并在调用函数时以这种方式调用它并确保详细信息为空

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 2

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

致谢。

Answer 3

实际上，您可以在CSS中打勾一下，在主样式表中声明：

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

现在您的\n将在消息中起作用：）

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

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

在primeng p-toast中使用html

5 个答案: