angular - 从解析器重定向到 404 页面时，将 URL 设置为取消的路径

Question

假设我们有以下路由配置:

[{
    path: "people",
    children: [
        {
            path: ":id",
            component: PersonProfileComponent,
            resolve: { person: PersonResolver },
            children: [
                { path: "", component: PersonOverviewComponent },
                { path: "photos", component: PersonPhotoListComponent }
            ]
        }
    ]
},
{ path: "404", component: PageNotFoundComponent },
{ path: "**",  component: PageNotFoundComponent }]

当用户尝试导航到其中任何一个时，我想重定向到 404 页面:

/people/{non-existing-id}
/people/{non-existing-id}/photos
/people/{existing-id}/{non-existing-subpage}

第三种情况由 ** 路由处理，因为它与之前的任何路由都不匹配。所以 PersonResolver必须处理前两种情况。

export class PersonResolver implements Resolve<Person> {
    constructor(private peopleService: PeopleService, private router: Router) { }

    resolve(route: ActivatedRouteSnapshot): Observable<Person> {
        return this.peopleService.find(id).catch(error => {
            if (error instanceof Response) {
                if (error.status === 404) {
                    this.router.navigate(["/404"]);
                }
                else {
                    //todo
                }
            }
            else {
                //todo
            }
            return Observable.of(null);
        });
    }
}

一切正常，但问题是当显示 404 页面时，浏览器 URL 更新为 <hostname>/404 (正如预期的那样)。我的问题是如何将 URL 设置为我们刚刚取消的路径(例如 <hostname>/people/fake-id/photos)，因为这是整个网络处理 404 的方式。 (我也尝试将 {skipLocationChange: true} 传递给 router.navigate() 但这保留了我们尝试导航到之前的位置)

Answer 1

可以在不使用 Location 导航的情况下更改 url - docs

您可以通过订阅 Router.events - NavigationError 对错误作出 react ，然后使用 skipLocationChange 显示 404，然后使用 location.go 更改位置>

导航到 404 完成后，您必须更改 url。

  constructor(router: Router, location: Location) {
    router.events
      .filter(event => event instanceof NavigationError)
      .subscribe((event: NavigationError) => {
        router.navigate(["/404"], {skipLocationChange: true})
          .then(() =>  location.go(event.url));
      })
  }

我更愿意在我的路由模块中这样做，但它也可以在解析器中完成。

Router.events 还没有很好的文档记录，您至少可以检查它们的列表 here并进行一些日志记录。