Notification通知提醒框

    在系统四个角显示通知提醒信息。经常用于以下情况：

    • 较为复杂的通知内容。
    • 带有交互的通知，给出用户下一步的行动点。
    • 系统主动推送。

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    与类似，如果要修改全局默认配置，你可以设置提供商 NZ_NOTIFICATION_CONFIG 的值来修改。（如：在你的模块的providers中加入 { provide: NZ_NOTIFICATION_CONFIG, useValue: { nzDuration: 3000 }}，NZ_NOTIFICATION_CONFIG 可以从 ng-zorro-antd 中导入）

    默认全局配置为：

    1. {
    2.   nzTop         : '24px',
    3.   nzBottom      : '24px',
    4.   nzPlacement   : 'topRight',
    5.   nzDuration    : 4500,
    6.   nzMaxStack    : 7,
    7.   nzPauseOnHover: true,
    8.   nzAnimate     : true
    9.  }

    最简单的用法，4.5 秒后自动关闭。

    1. import { Component } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-basic',
    6.   template: `
    7.     <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
    8.   `
    9. })
    10. export class NzDemoNotificationBasicComponent {
    11.   constructor(private notification: NzNotificationService) {}
    13.   createBasicNotification(): void {
    14.     this.notification.blank(
    15.       'Notification Title',
    16.       'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    17.     );
    18.   }
    19. }

    Notification通知提醒框 - 图2

    带有图标的通知提醒框

    通知提醒框左侧有图标。

    1. import { Component } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-with-icon',
    6.   template: `
    7.     <button nz-button (click)="createNotification('success')">Success</button>
    8.     <button nz-button (click)="createNotification('info')">Info</button>
    9.     <button nz-button (click)="createNotification('warning')">Warning</button>
    10.     <button nz-button (click)="createNotification('error')">Error</button>
    11.   `,
    12.   styles: [
    13.     `
    14.       button {
    15.         margin-right: 1em;
    16.       }
    17.     `
    18.   ]
    19. })
    20. export class NzDemoNotificationWithIconComponent {
    21.   createNotification(type: string): void {
    22.     this.notification.create(
    23.       type,
    24.       'Notification Title',
    25.       'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    26.     );
    27.   }
    29.   constructor(private notification: NzNotificationService) {}
    30. }

    Notification通知提醒框 - 图4

    自定义样式

    使用 nzStyle 和 nzClass 来定义样式。

    1. import { Component } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-custom-style',
    6.     <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
    7.   `
    8. })
    9. export class NzDemoNotificationCustomStyleComponent {
    10.   constructor(private notification: NzNotificationService) {}
    12.   createBasicNotification(): void {
    13.     this.notification.blank(
    14.       'Notification Title',
    15.       'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    16.       {
    17.         nzStyle: {
    18.           width: '600px',
    20.         },
    21.         nzClass: 'test-class'
    22.       }
    23.     );
    24.   }
    25. }

    通过模板来实现更加复杂的效果和交互。

    1. import { Component, TemplateRef, ViewChild } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-template',
    6.   template: `
    7.     <button nz-button [nzType]="'primary'" (click)="ninja()">Open the notification box</button>
    8.     <ng-template let-fruit="data">
    9.       It's a <nz-tag [nzColor]="fruit.color">{{ fruit.name }}</nz-tag>
    10.       <button nz-button nzType="small">Cut It!</button>
    11.     </ng-template>
    12.   `,
    13.   styles: [
    14.     `
    15.       button {
    16.         margin-top: 8px;
    17.       }
    18.     `
    19.   ]
    20. })
    21. export class NzDemoNotificationTemplateComponent {
    22.   @ViewChild(TemplateRef, { static: false }) template: TemplateRef<{}>;
    24.   ninja(): void {
    25.     const fruits = [
    26.       { name: 'Apple', color: 'red' },
    27.       { name: 'Orange', color: 'orange' },
    28.       { name: 'Watermelon', color: 'green' }
    29.     ];
    31.     fruits.forEach(fruit => {
    32.       this.notificationService.template(this.template, { nzData: fruit });
    33.     });
    34.   }
    36.   constructor(private notificationService: NzNotificationService) {}
    37. }

    Notification通知提醒框 - 图6

    自动关闭的延时

    自定义通知框自动关闭的延时，默认4.5s，取消自动关闭只要将该值设为 0 即可。

    1. import { Component } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-duration',
    6.   template: `
    7.     <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
    8.   `
    9. })
    10. export class NzDemoNotificationDurationComponent {
    11.   createBasicNotification(): void {
    12.     this.notification.blank(
    13.       'Notification Title',
    14.       'I will never close automatically. I will be close automatically. I will never close automatically.',
    15.       { nzDuration: 0 }
    16.     );
    17.   }
    18.   constructor(private notification: NzNotificationService) {}
    19. }

    自定义关闭按钮的样式和文字。

    Notification通知提醒框 - 图8

    可以设置通知从右上角、右下角、左下角、左上角弹出。

    1. import { Component } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-placement',
    6.   template: `
    7.     <nz-select
    8.       [(ngModel)]="placement"
    9.       style="width: 120px; margin-right: 10px;"
    10.       (ngModelChange)="clearBeforeNotifications()"
    11.     >
    12.       <nz-option nzValue="topLeft" nzLabel="topLeft"></nz-option>
    13.       <nz-option nzValue="topRight" nzLabel="topRight"></nz-option>
    14.       <nz-option nzValue="bottomLeft" nzLabel="bottomLeft"></nz-option>
    15.       <nz-option nzValue="bottomRight" nzLabel="bottomRight"></nz-option>
    16.     </nz-select>
    17.     <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
    19. })
    20. export class NzDemoNotificationPlacementComponent {
    21.   placement = 'topRight';
    23.   clearBeforeNotifications(): void {
    24.     this.notification.remove();
    25.   }
    27.   createBasicNotification(): void {
    28.     this.notification.config({
    29.       nzPlacement: this.placement
    30.     });
    31.     this.notification.blank(
    32.       'Notification Title',
    33.       'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    34.     );
    35.   }
    37.   constructor(private notification: NzNotificationService) {}
    38. }

    更新消息内容

    可以通过唯一的 nzKey 来更新内容。

    1. import { Component } from '@angular/core';
    2. import { NzNotificationService } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-notification-update',
    6.   template: `
    7.     <button nz-button [nzType]="'primary'" (click)="createAutoUpdatingNotifications()">
    8.       Open the notification box
    9.     </button>
    10.   `
    11. })
    12. export class NzDemoNotificationUpdateComponent {
    13.   constructor(private notification: NzNotificationService) {}
    15.   createAutoUpdatingNotifications(): void {
    16.     this.notification.blank('Notification Title', 'Description.', {
    17.       nzKey: 'key'
    18.     });
    20.     setTimeout(() => {
    21.       this.notification.blank('New Title', 'New description', {
    22.         nzKey: 'key'
    23.       });
    24.     }, 1000);
    25.   }
    26. }

    组件提供了一些服务方法，使用方式和参数如下：

    • NzNotificationService.blank(title, content, [options]) // 不带图标的提示
    • NzNotificationService.success(title, content, [options])
    • NzNotificationService.error(title, content, [options])
    • NzNotificationService.info(title, content, [options])
    • NzNotificationService.warning(title, content, [options])

    options 支持设置的参数如下：

    还提供了全局销毁方法：

    • NzNotificationService.remove(id) // 移除特定id的消息，当id为空时，移除所有消息（该消息id通过上述方法返回值中得到）

    当你调用 NzNotificationService.success 或其他方法时会返回该对象。

    1. export interface NzNotificationDataFilled {
    2.   onClose: Subject<boolean>; // 当 notification 关闭时它会派发一个事件，如果为用户手动关闭会派发 `true`