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

时间:2017-06-01 20:19:36

标签: javascript angular typescript element primeng

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

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

3 个答案:

答案 0 :(得分: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

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

答案 1 :(得分:0)

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

所以这可能会起作用。

答案 2 :(得分:0)

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

 以使用 \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