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.

in 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屋！