Notification 通知提醒框

全局展示通知提醒信息。

何时使用 #

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

  • 较为复杂的通知内容。

  • 带有交互的通知,给出用户下一步的行动点。

  • 系统主动推送。

如何使用

与Message类似,如果要修改message的默认配置,你可以设置提供商NZ_NOTIFICATION_CONFIG的值来修改。

(如:在你的模块的providers中加入 {{ '{' }} provide: NZ_NOTIFICATION_CONFIG, useValue: {{ '{' }} nzDuration: 3000 {{ '}' }} {{ '}' }}NZ_NOTIFICATION_CONFIG可以从ng-zorro-antd导入)

默认配置为

 {{ '{' }}
    nzTop                  : '24px',
    nzRight                : '0px',
    nzDuration             : 4500,
    nzMaxStack             : 7,
    nzPauseOnHover         : true,
    nzAnimate              : true
 {{ '}' }}

代码演示

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

通知提醒框左侧有图标。

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

自定义通知栏内HTML,注意防止XSS

API

全局配置(NZ_NOTIFICATION_CONFIG)

参数 类型 默认值 说明
nzTop String 24px 顶部距离
nzRight String 0px 右侧距离
nzDuration Number 0 持续时间,当设置为0时不消失(可用于NzNotificationService中)
nzMaxStack Number 8 提示最大堆叠数
nzPauseOnHover bool true 悬停时停止倒计时(可用于NzNotificationService中)
nzAnimate bool true 开关动画效果(可用于NzNotificationService中)

NzNotificationService服务

提示:以下options参数支持全局配置中的 nzDuration/nzAnimate/nzPauseOnHover

方法 参数 说明
blank (title: string, content: string, options?: Object) 不带图标的提示
success (title: string, content: string, options?: Object) 成功提示
error (title: string, content: string, options?: Object) 失败提示
warning (title: string, content: string, options?: Object) 警告提示
info (title: string, content: string, options?: Object) 信息提示
create (type: string, title: string, content: string, options?: Object) 提供type属性,可传入'success'等选项
html (html: string, options?: Object) 可使用html代码来渲染内容
remove (id?: string) 移除特定id的消息,当id为空时,移除所有消息