解决NzMessageService不显示问题

问题描述

在项目中的所有的全局提示都不生效。我们使用的是ng design of angular中现成的组件。代码如下所示。

import { NzMessageService } from 'ng-zorro-antd';
this.msgService.error(error.error.message);

解决思路

官方文档

最开始打开官方文档，发现默认的全局配置如下所示。

试着增加了一下显示时间,发现还是不行。

this.message.success('This is a prompt message for success, and it will disappear in 10 seconds', {
  nzDuration: 10000
});

之后在几次连续触发事件之后我发现。当你连续多次点击是是可以出现的,我们系统的头部如下所示。

之后意识到是不是导航栏将提示给挡住了，于是更改导航栏宽度，发现果然是如此。

之后想法是根据官方文档的描述更改顶部距离

如下更改发现还是不行。

进入源码发现并没有nztop（不知道是不是文档有问题）

之后查看为什么导航栏会将提示挡住，发现如下提示的z-index是1010，而我们的导航栏是9999

<nz-header style="position:fixed; width:100%;z-index: 99999;">

解决方案

更改导航栏的z-index小于1010即可。我们自己使用的组件的z-index尽量小于1000否则容易产生一些想不到的错误。