如何将primeng确认框消息打破到单独的行？答案

【问题标题】：How to break primeng confirmation box message to separate line?如何将primeng确认框消息打破到单独的行？
【发布时间】：2017-11-03 03:03:06
【问题描述】：

谁能给我建议打破确认框消息。

我已经尝试过下面的代码。但它将 br 标签显示为字符串。还有什么办法可以解决吗？

this.confirmationService.confirm({
                    message: 'CoC updated successfully' + '</br>' + ' Do you want to close or continue working with this?',
                    icon: 'fa fa-question-circle',
                    header: 'Confirm Save',
                    accept: () => {
                       this.infomessage = [];
                        this.infomessage.push({ severity: 'success', summary: '', detail: Updated Successfully' });                    },
                    reject: () => {
                        this.router.navigate(['versions']);
                    }
                });

【问题讨论】：

<br/> 或 \n ?
都试过了。但不幸的是没有工作
我对模板字符串一无所知。我已经发布了有问题的代码。我需要在我的页面中的几个确认框。所以我不喜欢和模板一起使用。
我认为它的行为类似于 JavaScript 警报，并且不允许其中包含 HTML。使用 innerHTML 而不是 interpolation binding 实际上存在一个未解决的问题：github.com/primefaces/primeng/issues/2116

标签： javascript angular typescript element primeng

【解决方案1】：

我不确定这是否有效，但您可以尝试使用 DomSanitizer。像这样修改你的代码：

message: this.sanitizer.bypassSecurityTrustHtml(
'CoC updated successfully' + '</br>' + ' Do you want to close or continue working with this?'
)

在你需要之前：

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

在构造函数中...

constructor(private sanitizer: DomSanitizer)

当你查看PrimeNG的源代码时...他们正在使用

[innerHTML]="message"

所以这可能行得通。

【讨论】：

但是我不喜欢使用[innerHttml]。我认为这是个坏主意。我会尝试最坏的情况:)
您不必这样做。他们在自己的代码中设置对话框的内容。我提到过，因为 DomSanitizer 不使用 [innerHTML] 就无法工作。

【解决方案2】：

是的，我通过以下步骤得到它。

步骤 1

我们需要将{{message}} 移动到<pre> 标签内 confirmdialog.metadata.json 文件。喜欢，

<span class=\"ui-confirmdialog-message\"><pre>{{message}}</pre></span>

第二步

我们应该在这个类中添加white-space: pre-line .ui-confirmdialog-message。喜欢，

.ui-confirmdialog-message {
       white-space: pre-line;
}

第三步

如果您添加\n，那么我们可以中断消息。喜欢，message : updated successfully \nDo you want to close or continue working with this

我希望这个答案对某人有所帮助

【讨论】：

这工作（在 PrimeNG 6 上测试）。但是，第 1 步不是必需的。

【解决方案3】：

最简单的方法是在确认对话框中添加

以便能够使用 \n

例如：

this.confirmationService.confirm({
                    message: '<pre>CoC updated successfully\nDo you want to close or continue working with this?</pre>',
                    icon: 'fa fa-question-circle',
                    header: 'Confirm Save',
                    accept: () => {
                       this.infomessage = [];
                        this.infomessage.push({ severity: 'success', summary: '', detail: Updated Successfully' });                    },
                    reject: () => {
                        this.router.navigate(['versions']);
                    }
                });

来源：https://github.com/primefaces/primeng/issues/1310

【讨论】：