Angular 6-angular-通知程序

Question

我正在使用angular-notifier进行通知。但我似乎找不到任何对自定义HTML的支持。当我将任何html标记附加到要在toast中显示的消息中时，html标记也呈现在消息中。如果有人有解决方案，请告诉我。

Answer 1

可以使用ng-template自定义通知程序。首先在您的组件HTML中定义一个自定义ng-template：

<ng-template #customNotification let-notificationData="notification">
    <my-custom-alert type="notificationData.type">
        {{ notificationData.message }}
        // Here you can define any custom HTML
    </my-custom-alert>
</ng-template>

然后，在组件内部，您可以使用Angular的ViewChild使用模板变量#customNotification引用ng-template：

import { ViewChild } from '@angular/core'
...
@Component({...})
export class MyComponent {
@ViewChild('customNotification') customNotificationTmpl;
...
constructor(private notifierService: NotifierService) {}

showNotification() {
   const msg = {
       message: 'Hi there!',
       type: 'info'
   };

   this.notifier.show({
       message: msg.message,
       type: msg.type,
       template: this.customNotificationTmpl
    });
 }
}

Answer 2

在documentation angular-notifier中有一种简单的方法

您可以在您的component.html文件中定义一个自定义ng模板，如下所示：

<notifier-container>
  <ng-template #customNotification let-notificationData="notification">
    <span type="notificationData.type">
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg>
      <span>{{ notificationData.message }} to angular-notifier</span>
    </span>
  </ng-template>
</notifier-container>

在您的组件中，您可以使用Angular的ViewChild通过其模板变量#customNotification引用：

import { ViewChild } from "@angular/core";
 
@Component({
    // ...
})
export class SomeComponent {
    @ViewChild("customNotification", { static: true }) customNotificationTmpl;
 
    constructor(private notifierService: NotifierService) {}
 
    showNotification() {
        this.notifier.show({
            message: "Hi there!",
            type: "info",
            template: this.customNotificationTmpl
        });
    }
}