Message全局提示

全局展示操作反馈信息。

何时使用

  • 可提供成功、警告和错误等反馈信息。
  • 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

单独引入此组件

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

  1. import { NzMessageModule } from 'ng-zorro-antd/message';

如何使用

如果要修改全局默认配置,你可以设置提供商 NZ_MESSAGE_CONFIG 的值来修改。(如:在你的模块的providers中加入 { provide: NZ_MESSAGE_CONFIG, useValue: { nzDuration: 3000 }}NZ_MESSAGE_CONFIG 可以从 ng-zorro-antd 中导入)

默认全局配置为:

  1. {
  2. nzDuration: 3000,
  3. nzMaxStack: 7,
  4. nzPauseOnHover: true,
  5. nzAnimate: true
  6. }

代码演示

Message全局提示 - 图1

普通提示

信息提醒反馈。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. @Component({
  4. selector: 'nz-demo-message-info',
  5. template: `
  6. <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button>
  7. `
  8. })
  9. export class NzDemoMessageInfoComponent {
  10. constructor(private message: NzMessageService) {}
  11. createBasicMessage(): void {
  12. this.message.info('This is a normal message');
  13. }
  14. }

Message全局提示 - 图2

修改延时

自定义时长 10s,默认时长为 3s

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. @Component({
  4. selector: 'nz-demo-message-duration',
  5. template: `
  6. <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Customized display duration</button>
  7. `
  8. })
  9. export class NzDemoMessageDurationComponent {
  10. createBasicMessage(): void {
  11. this.message.success('This is a prompt message for success, and it will disappear in 10 seconds', {
  12. nzDuration: 10000
  13. });
  14. }
  15. constructor(private message: NzMessageService) {}
  16. }

Message全局提示 - 图3

结束事件

可通过订阅 onClose 事件在 message 关闭时做出某些操作。以上用例将依次打开三个 message。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { concatMap } from 'rxjs/operators';
  4. @Component({
  5. selector: 'nz-demo-message-close',
  6. template: `
  7. <button nz-button [nzType]="'default'" (click)="startShowMessages()">Display a sequence of messages</button>
  8. `
  9. })
  10. export class NzDemoMessageCloseComponent {
  11. constructor(private message: NzMessageService) {}
  12. startShowMessages(): void {
  13. this.message
  14. .loading('Action in progress', { nzDuration: 2500 })
  15. .onClose!.pipe(
  16. concatMap(() => this.message.success('Loading finished', { nzDuration: 2500 }).onClose!),
  17. concatMap(() => this.message.info('Loading finished is finished', { nzDuration: 2500 }).onClose!)
  18. )
  19. .subscribe(() => {
  20. console.log('All completed!');
  21. });
  22. }
  23. }

Message全局提示 - 图4

其他提示类型

包括成功、失败、警告。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. @Component({
  4. selector: 'nz-demo-message-other',
  5. template: `
  6. <button nz-button (click)="createMessage('success')">Success</button>
  7. <button nz-button (click)="createMessage('error')">Error</button>
  8. <button nz-button (click)="createMessage('warning')">Warning</button>
  9. `,
  10. styles: [
  11. `
  12. [nz-button] {
  13. margin-right: 8px;
  14. }
  15. `
  16. ]
  17. })
  18. export class NzDemoMessageOtherComponent {
  19. createMessage(type: string): void {
  20. this.message.create(type, `This is a message of ${type}`);
  21. }
  22. constructor(private message: NzMessageService) {}
  23. }

Message全局提示 - 图5

加载中

进行全局 loading,异步自行移除。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. @Component({
  4. selector: 'nz-demo-message-loading',
  5. template: `
  6. <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Display a loading indicator</button>
  7. `
  8. })
  9. export class NzDemoMessageLoadingComponent {
  10. constructor(private message: NzMessageService) {}
  11. createBasicMessage(): void {
  12. const id = this.message.loading('Action in progress..', { nzDuration: 0 }).messageId;
  13. setTimeout(() => {
  14. this.message.remove(id);
  15. }, 2500);
  16. }
  17. }

API

NzMessageServiceservice

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

  • NzMessageService.success(content, [options])
  • NzMessageService.error(content, [options])
  • NzMessageService.info(content, [options])
  • NzMessageService.warning(content, [options])
  • NzMessageService.loading(content, [options])
    参数说明类型默认值
    content提示内容string | TemplateRef<void>-
    options支持设置针对当前提示框的参数,见下方表格object-

options 支持设置的参数如下:

参数说明类型
nzDuration持续时间(毫秒),当设置为0时不消失number
nzPauseOnHover鼠标移上时禁止自动移除boolean
nzAnimate开关动画效果boolean

还提供了全局销毁方法:

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

全局配置(NZ_MESSAGE_CONFIG)

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

NzMessageDataFilled

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

  1. export interface NzMessageDataFilled {
  2. onClose: Subject<false>; // 当 message 关闭时它会派发一个事件
  3. }