Notification通知提醒框

全局展示通知提醒信息。

何时使用

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

  • 较为复杂的通知内容。
  • 带有交互的通知,给出用户下一步的行动点。
  • 系统主动推送。
  1. import { NzNotificationModule } from 'ng-zorro-antd/notification';

代码演示

Notification通知提醒框 - 图1

基本

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

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

Notification通知提醒框 - 图2

带有图标的通知提醒框

通知提醒框左侧有图标。

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

Notification通知提醒框 - 图3

自定义图标

图标可以被自定义。

  1. import { Component, TemplateRef } from '@angular/core';
  2. import { NzNotificationService } from 'ng-zorro-antd/notification';
  3. @Component({
  4. selector: 'nz-demo-notification-custom-icon',
  5. template: `
  6. <ng-template #template>
  7. <div class="ant-notification-notice-content">
  8. <div class="ant-notification-notice-with-icon">
  9. <span class="ant-notification-notice-icon"><i nz-icon nzType="smile" style="color: rgb(16, 142, 233);"></i></span>
  10. <div class="ant-notification-notice-message">Notification Title</div>
  11. <div class="ant-notification-notice-description">
  12. This is the content of the notification. This is the content of the notification. This is the content of the notification.
  13. </div>
  14. </div>
  15. </div>
  16. </ng-template>
  17. <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
  18. Open the notification box
  19. </button>
  20. `
  21. })
  22. export class NzDemoNotificationCustomIconComponent {
  23. constructor(private notification: NzNotificationService) {}
  24. createBasicNotification(template: TemplateRef<{}>): void {
  25. this.notification.template(template);
  26. }
  27. }

Notification通知提醒框 - 图4

自定义样式

使用 nzStyle 和 nzClass 来定义样式。

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

Notification通知提醒框 - 图5

使用模板

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

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

Notification通知提醒框 - 图6

自动关闭的延时

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

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

Notification通知提醒框 - 图7

自定义按钮

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

  1. import { Component, TemplateRef } from '@angular/core';
  2. import { NzNotificationService } from 'ng-zorro-antd/notification';
  3. @Component({
  4. selector: 'nz-demo-notification-with-btn',
  5. template: `
  6. <ng-template #template let-notification>
  7. <div class="ant-notification-notice-content">
  8. <div>
  9. <div class="ant-notification-notice-message">Notification Title</div>
  10. <div class="ant-notification-notice-description">
  11. A function will be be called after the notification is closed (automatically after the "duration" time of manually).
  12. </div>
  13. <span class="ant-notification-notice-btn">
  14. <button nz-button nzType="primary" nzSize="small" (click)="notification.close()">
  15. <span>Confirm</span>
  16. </button>
  17. </span>
  18. </div>
  19. </div>
  20. </ng-template>
  21. <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
  22. Open the notification box
  23. </button>
  24. `
  25. })
  26. export class NzDemoNotificationWithBtnComponent {
  27. constructor(private notification: NzNotificationService) {}
  28. createBasicNotification(template: TemplateRef<{}>): void {
  29. this.notification.template(template);
  30. }
  31. }

Notification通知提醒框 - 图8

位置

通知从右上角、右下角、左下角、左上角弹出。

  1. import { Component } from '@angular/core';
  2. import { NzNotificationPlacement, NzNotificationService } from 'ng-zorro-antd/notification';
  3. @Component({
  4. selector: 'nz-demo-notification-placement',
  5. template: `
  6. <button nz-button (click)="createBasicNotification('topLeft')" nzType="primary"><i nz-icon nzType="radius-upleft"></i> topLeft</button>
  7. <button nz-button (click)="createBasicNotification('topRight')" nzType="primary">
  8. <i nz-icon nzType="radius-upright"></i> topRight
  9. </button>
  10. <nz-divider></nz-divider>
  11. <button nz-button (click)="createBasicNotification('bottomLeft')" nzType="primary">
  12. <i nz-icon nzType="radius-bottomleft"></i> bottomLeft
  13. </button>
  14. <button nz-button (click)="createBasicNotification('bottomRight')" nzType="primary">
  15. <i nz-icon nzType="radius-bottomright"></i> bottomRight
  16. </button>
  17. `,
  18. styles: [
  19. `
  20. button {
  21. margin-right: 1em;
  22. }
  23. `
  24. ]
  25. })
  26. export class NzDemoNotificationPlacementComponent {
  27. placement = 'topRight';
  28. createBasicNotification(position: NzNotificationPlacement): void {
  29. this.notification.blank(
  30. 'Notification Title',
  31. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  32. { nzPlacement: position }
  33. );
  34. }
  35. constructor(private notification: NzNotificationService) {}
  36. }

Notification通知提醒框 - 图9

更新消息内容

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

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

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 支持设置的参数如下:

参数说明类型
nzKey通知提示的唯一标识符string
nzDuration持续时间(毫秒),当设置为 0 时不消失number
nzPauseOnHover鼠标移上时禁止自动移除boolean
nzAnimate开关动画效果boolean
nzStyle自定义内联样式object
nzClass自定义 CSS classobject
nzData任何想要在模板中作为上下文的数据any
nzCloseIcon自定义关闭图标TemplateRef<void> | string

还提供了全局销毁方法:

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

全局配置

可以通过 NzConfigService 进行全局配置。

参数说明类型默认值
nzDuration持续时间(毫秒),当设置为0时不消失number4500
nzMaxStack同一时间可展示的最大提示数量number8
nzPauseOnHover鼠标移上时禁止自动移除booleantrue
nzAnimate开关动画效果booleantrue
nzTop消息从顶部弹出时,距离顶部的位置。string24px
nzBottom消息从底部弹出时,距离底部的位置。string24px
nzPlacement弹出位置,可选 topLefttopRightbottomLeftbottomRightstringtopRight

NzNotificationRef

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

  1. export interface NzNotificationDataRef {
  2. messageId: string;
  3. onClose: Subject<boolean>; // 当 notification 关闭时它会派发一个事件,如果为用户手动关闭会派发 `true`
  4. onClick: Subject<MouseEvent>;
  5. }