• Message全局提示
    • 何时使用
    • 如何使用
    • 代码演示
    • API
      • 单独引入此组件
      • NzMessageServiceservice
      • 全局配置（NZ_MESSAGE_CONFIG）
      • NzMessageDataFilled

    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';
    4. @Component({
    5.   selector: 'nz-demo-message-info',
    6.   template: `
    7.     <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button>
    8.   `,
    9.   styles: []
    10. })
    11. export class NzDemoMessageInfoComponent {
    12.   constructor(private message: NzMessageService) {}
    14.   createBasicMessage(): void {
    15.     this.message.info('This is a normal message');
    16.   }
    17. }

    Message全局提示 - 图2

    修改延时

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

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

    Message全局提示 - 图3

    结束事件

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

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

    Message全局提示 - 图4

    其他提示类型

    包括成功、失败、警告。

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

    Message全局提示 - 图5

    加载中

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

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

    API

    单独引入此组件

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

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

    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. }