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

Question

任何人都可以给我打破确认框消息的建议。

我在下面的代码中尝试了这个。但它将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']);
                    }
                });

Answer 1

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

第1步

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

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

第2步

我们应该在此课程white-space: pre-line中添加.ui-confirmdialog-message。等，

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

第3步

  

如果你添加\n，那么我们可以打破这个消息。比如，message : updated successfully \nDo you want to close or continue working with this

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

Answer 2

我不确定这是否有效，但您可以尝试使用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"

所以这可能会起作用。

Answer 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