Angular 9 - onSameUrlNavigation ='reload' 不触发路由器事件

Question

我的 Angular 9 应用程序有一个 CustomErrorHandler 和一个 ErrorPageComponent。当整个应用程序抛出任何异常时，CustomErrorHandler 将告诉路由器导航到 ErrorPageComponent。但是，ErrorPageComponent 中有一个按钮可能会抛出自己的异常，在这种情况下，我希望 CustomErrorHandler 仍然告诉路由器导航到 ErrorPageComponent，这是正常的。但是，当 ErrorPageComponent 以这种方式路由到自身时，需要第二次调用它的初始化方法。
通常，如果您希望组件在路由到自身后调用初始化方法，您可以简单地订阅路由事件。然后，只要您正确设置了 onSameUrlNavigation 以重新加载，当组件导航到自身时，路由器将触发路由事件将调用您的组件用于订阅它的任何回调方法。
但是，当我的 CustomErrorHandler 告诉路由器导航到 ErrorPageComponent 时，不会触发路由事件。
如果您查看代码，这将更有意义:
这是我在 app-routing.module.ts 中的路由配置:

const routes: Routes = [
  { path: 'normal', component: NormalComponent},
  { path: '',   redirectTo: '/normal', pathMatch: 'full'}
];

const volitileRoutes: Routes = [
  { path: 'error', component: ErrorPageComponent}
];

const fallbackRoute: Routes = [
  { path: '**', component: Error404PageComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    RouterModule.forRoot(volitileRoutes, {onSameUrlNavigation: 'reload'}), // I've correctly set onSameUrlNavigation
    RouterModule.forRoot(fallbackRoute)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是将重定向到 ErrorPageComponent 的 CustomErrorHandler:

@Injectable({
  providedIn: 'root'
})
export class CustomErrorHandler extends ErrorHandler {

  constructor(private ngZone: NgZone, private router: Router){
    super();
  }

  handleError(error: any){
    // error handling code here

    console.log('error caught'); // I've confirmed that my CustomErrorHandler is in fact handling errors.

    /* This is not the normal way to do navigation. But for reasons I don't understand, this
       is the only way to get navigation to work from within an ErrorHandler; you cannot simply
       call router.navigate like normal from within an ErrorHandler. */
    this.ngZone.run(() => this.router.navigate(['/error']));
  }
}

最后，这里是 ErrorPageComponent:

@Component({
  selector: 'app-error-page',
  templateUrl: './error-page.component.html',
  styleUrls: ['./error-page.component.css']
})
export class ErrorPageComponent implements OnInit, OnDestroy {

  private navSubscription = new Subscription();

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.navSubscription = this.router.events.subscribe((e: any) => {
      console.log('route event triggered'); // this line is never reached
      if (e instanceof NavigationEnd) {
        // do initialization code
      }
    });
  }

  ngOnDestroy(): void {
    this.navSubscription?.unsubscribe(); // this prevents a memory leak
  }
}

正如我在代码注释中提到的，我已经确认 CustomErrorHandler 正在正确处理错误，并且正在调用路由器导航方法。但是，永远不会调用传递给路由器导航事件的订阅回调方法。我究竟做错了什么？如何在 ErrorPageComponent 中订阅路由事件？

Answer 1

您是否尝试先重定向到虚拟位置，然后重定向到您的实际组件，

this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
     this.router.navigate(['/error'])
);

我建议您将第一个位置设置为 ngOnInit 和 ngOnDestroy 的位置，它们不会执行很多操作，因为这将在路由到新位置之前等待 init 和 destroy。
这样做你不需要使用 onSameUrlNavigation ，我觉得这样更好，因为你不需要使用订阅，所以销毁它，你不必设置 onSameUrlNavigation并且您可以在需要时使用简单的功能简单地重新加载。
但是如果你想使用你的订阅，把它移到你的构造函数而不是你的 ngOnInit 中。功能。