Message全局提示

全局展示操作反馈信息。

何时使用

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

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

代码演示

普通提示

信息提醒反馈。

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'nz-demo-message-info',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button>
  `
})
export class NzDemoMessageInfoComponent {
  constructor(private message: NzMessageService) {}
  createBasicMessage(): void {
    this.message.info('This is a normal message');
  }
}

修改延时

自定义时长 10s，默认时长为 3s。

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

结束事件

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

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { concatMap } from 'rxjs/operators';
@Component({
  selector: 'nz-demo-message-close',
  template: `
    <button nz-button [nzType]="'default'" (click)="startShowMessages()">Display a sequence of messages</button>
  `
})
export class NzDemoMessageCloseComponent {
  constructor(private message: NzMessageService) {}
  startShowMessages(): void {
    this.message
      .loading('Action in progress', { nzDuration: 2500 })
      .onClose!.pipe(
        concatMap(() => this.message.success('Loading finished', { nzDuration: 2500 }).onClose!),
        concatMap(() => this.message.info('Loading finished is finished', { nzDuration: 2500 }).onClose!)
      )
      .subscribe(() => {
        console.log('All completed!');
      });
  }
}

其他提示类型

包括成功、失败、警告。

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'nz-demo-message-other',
  template: `
    <button nz-button (click)="createMessage('success')">Success</button>
    <button nz-button (click)="createMessage('error')">Error</button>
    <button nz-button (click)="createMessage('warning')">Warning</button>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoMessageOtherComponent {
  createMessage(type: string): void {
    this.message.create(type, `This is a message of ${type}`);
  }
  constructor(private message: NzMessageService) {}
}

加载中

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

import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'nz-demo-message-loading',
  template: `
    <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Display a loading indicator</button>
  `
})
export class NzDemoMessageLoadingComponent {
  constructor(private message: NzMessageService) {}
  createBasicMessage(): void {
    const id = this.message.loading('Action in progress..', { nzDuration: 0 }).messageId;
    setTimeout(() => {
      this.message.remove(id);
    }, 2500);
  }
}

API

NzMessageServiceservice

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

• NzMessageService.success(content, [options])
• NzMessageService.error(content, [options])
• NzMessageService.info(content, [options])
• NzMessageService.warning(content, [options])
• NzMessageService.loading(content, [options])

options 支持设置的参数如下：

还提供了全局销毁方法：

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

全局配置

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

NzMessageRef

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

export interface NzMessageRef {
  messageId: string;
  onClose: Subject<false>; // 当 message 关闭时它会派发一个事件
}