如果在路由期间组件(构造函数或ngOnInit)中存在未被捕获的错误,则导航将不再起作用.
即使有一个全局的ErrorHandler和一个用于RouterModule的ErrorHandler,也会发生这种情况,同时添加了一个ZoneListener – 请参阅app.module.ts
这里最小的例子:
https://embed.plnkr.co/L19S3hKWyqgKUIT1EJlI/preview
确保打开控制台.单击“示例组件”后,由于ExampleFormComponent中的强制错误,会出现一些堆栈跟踪.之后,您无法导航回“主页”.
如何处理意外的,未被捕获的错误,以确保它们不会破坏整个应用程序?
解决方法
我会做一些解决方法,如:
let hasRouterError = false; @Injectable() export class MyErrorHandler implements ErrorHandler { constructor(private inj: Injector) {} handleError(error: any): void { console.log('MyErrorHandler: ' + error); if(hasRouterError) { let router = this.inj.get(Router); router.navigated = false; } //throw error; // it is necessarily otherwise handleError won't be executed during next error } } export function MyRouterErrorHandler(error: any) { console.log('RouterErrorHandler: ' + error); hasRouterError = true; throw error; }
我们必须使用自定义RouteReuseStrategy:
export class PreventErrorRouteReuseStrategy implements RouteReuseStrategy { shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; } store(route: ActivatedRouteSnapshot,detachedTree: DetachedRouteHandle): void {} shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; } shouldReuseRoute(future: ActivatedRouteSnapshot,curr: ActivatedRouteSnapshot): boolean { if(hasRouterError) { hasRouterError = false; return false; } return future.routeConfig === curr.routeConfig; } }
它与DefaultRouteReuseStrategy的区别仅在于此代码
if(hasRouterError) { hasRouterError = false; return false; }
不要忘记将它添加到providers数组:
import { RouteReuseStrategy } from '@angular/router'; ... { provide: RouteReuseStrategy,useClass: PreventErrorRouteReuseStrategy },
你可以在Modified Plunker尝试一下
原文地址:https://www.jb51.cc/js/157602.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。