Angular Notifier 中的新行 [英] New line in Angular Notifier

问题描述

由于我无法为此做出决定，这里有一个关于 Angular 6 的简单问题.我正在使用 angular 6 和 angular-notofier 服务，我正在尝试向用户显示一条简单的多行消息.

As I cannot find a decision for this, here is a simple question for Angular 6. I am using angular 6 with angular-notofier service and I am trying to show a simple multiline message for the user.

我曾尝试使用 HTML 标签 <br/> 和换行符 "\n" 但没有成功.看起来有针对 XSS 的字符串转义，我无法添加新行.

I have tried using HTML tags <br/> and New line chars "\n" but with no success. Looks like there is string escaping against XSS or something and I cannot add a new line.

如果我可以这样做，或者我是否试图以错误的方式去做，有什么想法吗(如果是这样，那么为什么错了，我该怎么做?)?

Any ideas if I can do it that way OR if I am trying to do it in the wrong way (if so, then why is it wrong and how am I supposed to do it?)?

我想避免更复杂的结构，比如自定义模板(尽管我怀疑问题也应该出现在那里).

I would like to avoid more complicated constructions like custom templates (despite I suspect the problem should be presented there also).

这是我的代码":

constructor(
  private notifier: NotifierService,

...

this.notifier.notify(
  'error', 
  'Multiline' + "\n" + ' message will <br/> print in one line...' ....

非常感谢！安东

推荐答案

如果您想传递自定义消息，则可以利用模板.通过模板，您可以完全控制消息的显示方式.

If you want to pass your customized message then you can leverage the template. Through template you can have complete control how a message should be displayed.

在 html 中

是的，您需要在 html 中使用模板来包含多行的自定义消息.

in html

yes, you need to use template in html to have custom message including multi line.

<ng-template #notification let-notificationData="notification">
       <span [innerHTML]="notificationData.message"></span>
</ng-template>

在 ts

 @ViewChild('notification') notificationTemplate;

 this.notifier.show({
           message: msg.message,
           type: msg.messageType,
           template: this.notificationTemplate //<-- template name from html.
        });

更多细节查看官方文档 - https://www.npmjs.com/package/angular-notifier

For more details look at official docs - https://www.npmjs.com/package/angular-notifier

这篇关于Angular Notifier 中的新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！