Notification通知提醒框

全局展示通知提醒信息。

何时使用#

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

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

private readonly notification = inject(NzNotificationService);

代码演示

基本

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

expand codeexpand code
      加载中
带有图标的通知提醒框

通知提醒框左侧有图标。

expand codeexpand code
      加载中
自定义图标

图标可以被自定义。

expand codeexpand code
      加载中
自定义样式

使用 nzStyle 和 nzClass 来定义样式。

expand codeexpand code
      加载中
使用模板

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

expand codeexpand code
      加载中
自动关闭的延时

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

expand codeexpand code
      加载中
自定义按钮

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

expand codeexpand code
      加载中
位置

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

expand codeexpand code
      加载中
更新消息内容

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

expand codeexpand code
      加载中

API#

NzNotificationService#

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

  • 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 | TemplateRef<void>-
content提示内容string | TemplateRef<void>-
options支持设置针对当前提示框的参数，见下方表格object-

options 支持设置的参数如下：

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

还提供了全局销毁方法：

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

全局配置#

可以通过 NzConfigService 进行全局配置，详情请见文档中 全局配置项 章节。

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

NzNotificationRef#

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

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