NG-ZORRO的NzMessageService + Angu

在Angluar项目中，如果有很多的提示信息，又需要做中英切换，可以考虑将提示信息单独封装成服务，在需要的地方调用。下面介绍的封装提示信息方法可以在Angular6 + ngZorro的组合下使用。

1.创建提示信息服务

在app文件夹内单独生成一个shared/services/message-tip.service.ts文件，如果你已经有了公共组件文件夹可以在里面直接新建，这样可以方便管理项目代码。

2.初始化message-tip.service.ts

// 引入需要的模块
import { Injectable } from '@angular/core';
import {NzMessageService} from "ng-zorro-antd";
import {TranslateService} from "@ngx-translate/core";

//  注入
@Injectable({
  providedIn: 'root'
})
export class MessageTipService {


//  实例化模块
  constructor(
    private msg: NzMessageService,
    public translate: TranslateService,
  ) { }


//  封装好提示信息函数，当然前提是项目里面已经有了ie8n了，this.translate.instant()函数将自动找到对应映射翻译。
  /* *
  *   type: 提示的类型。 success成功/绿色 info提示/蓝色 warning警告/黄色 error错误/红色 loading转圈
  *   str:  提示的内容，在ie8n里对应映射
  * */
  createTips(type: 'success' | 'info' | 'warning' | 'error' | 'loading' | string, str:string):any{
    return this.msg.create(type, this.translate.instant(str));
  }
}

3.使用封好的提示函数

//  引入服务
import {MessageTipService} from "@shared/services/message-tip.service";

...

//  实例化服务
 constructor(
    ...
    private msg: MessageTipService
  ) {}

...
//  使用服务中的createTips()函数
this.msg.createTips('warning','prompt-tips.strategy.fail-get-msg');

4.提示信息效果
有四种样式的提示信息，在createTips()函数里我们已经封好了，要啥样的就在第一个参数输入想要的类型就行。
比如警告框warning：