url参数错误时如何触发通配符路由?

时间:2018-09-20 21:02:47

标签: angular angular-router angular-router-params

在Angular 6中,我使用一个可观察对象来管理基于URL参数的详细记录的获取,如下所示:

ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      const id = parseInt(params.get('id'), 10);
      if (!id) {
        throw new Error('Hero id invalid.');
      }
      return this.service.getHeroById(id);
    }),
    catchError(err => {
      this.router.navigate(['/pageNotFound'], {skipLocationChange: true});
      return throwError(err);
    }),
  );
}

在catchError管道中,我只是导航到一个不存在的URL,这将导致通配符路由触发并显示我的PageNotFoundComponent。这似乎确实令人费解,但是我不明白如何使路由器显示该组件。有更好的方法吗?

这是我的设置的演示: https://stackblitz.com/edit/angular-router-not-found?file=src%2Fapp%2Fhero%2Fhero-detail.component.ts

0 个答案:

没有答案