Angular 通知程序中的新行

Question

因为我无法为此找到决定，这里有一个关于 Angular 的简单问题 6. 我正在使用 angular 6 和 angular-notofier 服务，我试图展示一个简单的给用户的多行消息。

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

任何想法，如果我可以那样做，或者如果我试图以错误的方式做（如果是这样，那为什么是错的，我应该怎么做？）？

我想避免更复杂的构造，如自定义模板（尽管我怀疑问题也应该出现在那里）。

这是我的 "code":

constructor(
  private notifier: NotifierService,

...

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

非常感谢！安东

Answer 1

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 中的模板来获得包含多行的自定义消息。

<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

Answer 2

创建新的自定义模板时，库仅使用您的 html。因此，需要编写一个自定义按钮（将来可能会以某种方式更改，但现在这是一个解决方案）。

在HTML中：

<button
    class="notifier__notification-button"
    type="button"
    title="dismiss"
    (click)="onClickDismiss()"
>
    <svg class="notifier__notification-button-icon" viewBox="0 0 24 24" width="20" height="20">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
    </svg>
</button>

那么，在TS中如下：

onClickDismiss() {
   this.notifierService.hide(this.notificationId);
}

Angular 通知程序中的新行

New line in Angular Notifier

angular

notifications

angular6

newline

multiline

在html

在 ts