待调研
问题原因:经过一步一步调试,发现并不是toastrService.show
没有触发, 而是在前一个view上面触发过后,执行了路由跳转,导致渲染d框的容器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 触发出来的d框渲染在这里
div>
div>
nb-layout>
component-b>
当路由跳转后,整个component-b
dom被替换成了
的dom,所以看不到提示d框,误以为是没有触发。
想要做一个全局拦截器,用来针对所有出错的http 请求,通知用户出错且显示出错提示。主要代码如下,只要错误是401,d框不能成功触发。
if (error?.status === 401) {
this.toastrService.show(message, title); // 期望有d框提示,但是没有
this.router.navigate(['/login']);
} else if (error?.status >= 500) {
this.toastrService.show(message, title); // 预期有d框提示,可以成功提示用户
}
Reference
Toaster is not triggering in angular4
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)