typescript 如何将primeng确认框消息拆分为单独的行?

idfiyjo8  于 2022-11-18  发布在  TypeScript
关注(0)|答案(4)|浏览(167)

有人能给予我建议打破确认框消息。
我已经尝试了下面的代码。但它显示为字符串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']);
                    }
                });
htrmnn0y

htrmnn0y1#

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

步骤1

我们需要将{{message}}移动到confirmdialog.metadata.json文件中的<pre>标记内。例如,

<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
我希望这个答案能对某些人有所帮助

rnmwe5a2

rnmwe5a22#

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

所以这可能行得通。

9rnv2umw

9rnv2umw3#

最简单的方法是在确认对话框中添加****,以便能够使用**\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

yrdbyhpb

yrdbyhpb4#

尝试在消息中添加<pre></pre>,如下所示。此外,尝试使用\n代替</br>

message: '<pre>phrase 1\nphrase 2</pre>',

相关问题