问题描述
在项目中的所有的全局提示都不生效。我们使用的是 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 否则容易产生一些想不到的错误。