如果在路由过程中某个组件(构造函数或ngOnInit)存在未捕获的错误,此后导航将不再起作用。
即使存在一个全局ErrorHandler和一个RouterModule的ErrorHandler,也要添加一个ZoneListener以确保发生这种情况-请参阅app.module.ts
这里的最小示例:
https://embed.plnkr.co/L19S3hKWyqgKUIT1EJlI/preview
确保打开控制台。单击“Example Component”后,由于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;
}
不要忘记将其添加到provider数组:
import { RouteReuseStrategy } from '@angular/router';
...
{ provide: RouteReuseStrategy, useClass: PreventErrorRouteReuseStrategy },
您可以在尝试Modified Plunker