Angular 错误页面组件使用带有 id 的路由而没有重定向

Question

我需要您的帮助来实现带有 id 的子路由的 404 组件，而无需重定向到“404”页面。这个子路由有一个解析器来获取我的 API。当 API 返回 404 时，我想重定向以显示我的 404 组件，但没有重定向。
这是我的代码：

routing.module.ts

 const route = [
 ...
  {
    path: ':id',
    component: ChildComponent,
    resolve: {
      data: ChildResolver,
    },
  },
  {
    path: '**',
    pathMatch: 'full',
    component: ErrorPageComponent,
  },
...

子解析器

...
  public resolve(route: ActivatedRouteSnapshot): Observable<ChildItem> {
    return this.fetch(route.params.id);
  }
...

注意：ErrorPageComponent 是一个只显示错误消息的愚蠢组件。 Ps：对不起我的英语，我是法国人。

非常感谢， 最好的祝福 威廉

Answer 1

有两种方法可以做到这一点：

1. 如果您从 API 收到错误，您可以根据该错误创建自定义消息：404 - 'Page Not Found'。

2. 您可以使用不需要的自定义消息重定向到全局错误处理程序，但可以考虑。

如果您从 API 收到错误，您可以创建基于自定义消息的 例如：404 - 'Page Not Found'。

import { catchError } from 'rxjs/operators';
...
...
 public resolve(route: ActivatedRouteSnapshot): Observable<ChildItem> {
    this.fetch(route.params.id).pipe(catchError((err) => {
      return of(err);
    }));
  }

在子组件中，根据收到的错误消息/代码，使用ngIf在子组件中启用ErrorPageComponent。

您必须检查从响应中收到的状态代码，否则您可以使用此link 来实现。

您可以使用自定义消息重定向到全局错误处理程序 您不需要，但可以考虑。

import { Observable, EMPTY } from 'rxjs';
import { catchError } from 'rxjs/operators';
...
...
 public resolve(route: ActivatedRouteSnapshot): Observable<ChildItem> {
    this.fetch(route.params.id).pipe(catchError((err) => {
      if (err.status === 404) this.route.navigate['/ERRORPAGECOMPONENT'] 
      return EMPTY
    }));
  }

您可以在此处查看如何解决handle errors。