自动关闭的延时

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

import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
@Component({
  selector: 'nz-demo-notification-duration',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
  `
})
export class NzDemoNotificationDurationComponent {
  createBasicNotification(): void {
    this.notification.blank(
      'Notification Title',
      'I will never close automatically. I will be close automatically. I will never close automatically.',
      { nzDuration: 0 }
    );
  }
  constructor(private notification: NzNotificationService) {}
}

自定义按钮

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

import { Component, TemplateRef } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
@Component({
  selector: 'nz-demo-notification-with-btn',
  template: `
    <ng-template #template let-notification>
      <div class="ant-notification-notice-content">
        <div>
          <div class="ant-notification-notice-message">Notification Title</div>
          <div class="ant-notification-notice-description">
            A function will be be called after the notification is closed (automatically after the "duration" time of
            manually).
          </div>
          <span class="ant-notification-notice-btn">
            <button nz-button nzType="primary" nzSize="small" (click)="notification.close()">
              <span>Confirm</span>
            </button>
          </span>
        </div>
      </div>
    </ng-template>
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
      Open the notification box
    </button>
  `
})
export class NzDemoNotificationWithBtnComponent {
  constructor(private notification: NzNotificationService) {}
  createBasicNotification(template: TemplateRef<{}>): void {
    this.notification.template(template);
  }
}

位置

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

import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
@Component({
  selector: 'nz-demo-notification-placement',
  template: `
    <nz-select
      [(ngModel)]="placement"
      style="width: 120px; margin-right: 10px;"
      (ngModelChange)="clearBeforeNotifications()"
    >
      <nz-option nzValue="topLeft" nzLabel="topLeft"></nz-option>
      <nz-option nzValue="topRight" nzLabel="topRight"></nz-option>
      <nz-option nzValue="bottomLeft" nzLabel="bottomLeft"></nz-option>
      <nz-option nzValue="bottomRight" nzLabel="bottomRight"></nz-option>
    </nz-select>
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
  `
})
export class NzDemoNotificationPlacementComponent {
  placement = 'topRight';
  clearBeforeNotifications(): void {
    this.notification.remove();
  }
  createBasicNotification(): void {
    this.notification.config({
      nzPlacement: this.placement
    });
    this.notification.blank(
      'Notification Title',
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    );
  }
  constructor(private notification: NzNotificationService) {}
}

更新消息内容

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

import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
@Component({
  selector: 'nz-demo-notification-update',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createAutoUpdatingNotifications()">
      Open the notification box
    </button>
  `
})
export class NzDemoNotificationUpdateComponent {
  constructor(private notification: NzNotificationService) {}
  createAutoUpdatingNotifications(): void {
    this.notification.blank('Notification Title', 'Description.', {
      nzKey: 'key'
    });
    setTimeout(() => {
      this.notification.blank('New Title', 'New description', {
        nzKey: 'key'
      });
    }, 1000);
  }
}

API

NzNotificationServiceservice

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

• 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])

  参数	说明	类型	默认值
  title	标题	string	-
  content	提示内容	string	-
  options	支持设置针对当前提示框的参数，见下方表格	object	-

options 支持设置的参数如下：

还提供了全局销毁方法：

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

全局配置（NZ_MESSAGE_CONFIG）

NzNotificationDataFilled

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

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