如果在路由期间组件(构造函数或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尝试一下
