问题解决:
待调研
问题原因:
经过一步一步调试,发现并不是toastrService.show
没有触发, 而是在前一个view上面触发过后,执行了路由跳转,导致渲染弹框的容器dom 消失导致的。
正常所有元素的渲染结构如下:
<component-a>
<nb-layout>
<div class="content"></div>
</nb-layout>
</component-a>
当前在component-b
里面发生异常情况被捕获后,原来组件的toastrService.show
触发在component-b
的toastr-overlay-container
里面了,结构如下:
<component-b>
<nb-layout>
<div class="content"></div>
<div class="cdk-overlay-container">
<div class="toastr-overlay-container cdk-global-overlay-wrapper">
//toastrService.show 触发出来的弹框渲染在这里
</div>
</div>
</nb-layout>
</component-b>
当路由跳转后,整个component-b
dom被替换成了<component-a>
的dom,所以看不到提示弹框,误以为是没有触发。
问题描述:
想要做一个全局拦截器,用来针对所有出错的http 请求,通知用户出错且显示出错提示。主要代码如下,只要错误是401,弹框不能成功触发。
if (error?.status === 401) {
this.toastrService.show(message, title); // 期望有弹框提示,但是没有
this.router.navigate(['/login']);
} else if (error?.status >= 500) {
this.toastrService.show(message, title); // 预期有弹框提示,可以成功提示用户
}