Angular 路由异常处理错误处理程序答案

【问题标题】：Angular routing exceptions handing in error handlerAngular 路由异常处理错误处理程序
【发布时间】：2018-08-20 07:14:44
【问题描述】：

如何处理ErrorHandler 中的导航错误？

我尝试使用以下条件来检查 Error 对象是否属于 NavigationError 但它显示为 false。

export class AppErrorHandler implements ErrorHandler {

  constructor() { }

  handleError(error: Error) {
if (error instanceof NavigationError) {
      //do something here, may be notify or redirect to error page.
    }
}

如何处理ErrorHandler 中的路由器导航错误？我不想添加通配符路由。

如果类型正确，上述条件是否有效？如果是这样，我应该检查什么类型？

【问题讨论】：

你在哪里做......
@Antoniossss 更新问题，我正在使用 Angular 全局错误处理程序。
出于好奇，为什么不想添加通配符路由？
@deezg 我在使用子路由时遇到了一些困难。但主要原因是如果我能得到导航错误，而不仅仅是重定向，我几乎可以做任何事情，比如显示通知/日志记录。
你添加到提供者了吗？

标签： angular angular-routing angular-errorhandler

【解决方案1】：

@prajwal

尝试使用下一种方法来处理错误，它应该适用于 99.9% =)：

import { Router, NavigationError } from '@angular/router';

 constructor( private router: Router) {
this.router.events.filter(e => e instanceof NavigationError).subscribe(e => {
  console.log(`NAV ERROR -> ${e}`);
});

}

结果：

【讨论】：

这不适用于rxjs 6。另外，在哪里添加这个？在错误处理程序中还是在应用程序组件中？
他使用了注入器 Router 而不是错误处理程序，也许这就是要走的路
@Antoniossss 但是这个方法依赖于回调，不能在错误处理程序中使用。
@prajwal 您可以将此导航错误事件处理过滤器添加到单独的单例服务中，并在root 级别上共享它。在这里你可以阅读它angular.io/guide/singleton-services
为什么要为此创建单例服务？

【解决方案2】：

另一个答案是一个很好的起点，但不适用于 Angular 13，这就是我想出的

readonly router$: Subscription;

constructor(private router: Router){

    this.router$ = this.router.events.pipe(
        filter((e) => e instanceof RouterEvent),
        filter((e) => e.constructor.name === 'NavigationError')
    ).subscribe((e: NavigationError) => {
        console.error(`Could not load URL "${e.url}" ${e.error}`);
    });
}

别忘了退订

ngOnDestroy() {
    this.router$?.unsubscribe();
}

【讨论】：