角度“导航”到 404 但保留 url

Question

我已经检查了很多问题和互联网没有任何运气，所以也许有人遇到了类似的问题......

我实现了一个延迟加载的模块：

  {
    component: LoginPageComponent,
    path: '',
    pathMatch: 'full'
  },
  {
    canActivate: [AuthGuard],
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule),
    path: 'home'
  },

在 HomeRoutingModule 我还有一个

....
 children: [
      ...
      {
        path: 'items',
        canActivate: [SomeGuard,
        loadChildren: () => ....
      },

最后在那个子延迟加载的模块中路由：

{
    path: 'preview/:id',
    canActivate: [ItemLoadedGuard],
    component: PreviewPageComponent
  },

因此某些条目的 URL 将是例如：/home/items/preview/some-random-id。在那个ItemLoaderGuard 中，我对该资源执行BE 调用，并在出错时导航到404 页面。

但是当我通过那个实现时： /home/items/preview/wrong-id 我将被重定向到/404 页面。

我想做的是保留 url 并打开 404 页面组件，这样： /home/items/preview/wrong-id 使用 NotFoundPageComponent 而不是 PreviewPageComponent

我尝试过使用导航附加功能，例如：skipLocationChange 和 replaceUrl，但没有任何效果。

除了在 PreviewPageComponent 中添加一些将显示未找到或未找到的包装器之外，还有其他方法可以处理此问题吗（下面的示例代码）？

<not-found *ngIf="displayNotFound"></not-found>
<div class="content" *ngIf="!displayNotFound">
....
</div>

我也在考虑将 url 存储在本地存储中，导航到 404 然后替换没有路径的 url，但也许有人有更好的解决方案？

演示：https://stackblitz.com/edit/angular-404

Answer 1

将您的 preview.guard.ts 更改为

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({providedIn: 'root'})
export class PreviewGuard implements CanActivate {

constructor(private router: Router){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(next.params.id === '123-works'){
      console.log('allowed')
      return true;
    } else {
      console.log('not allowed');
      setTimeout(() => this.router.navigateByUrl('404', {skipLocationChange: true}));
      return true;
    }
  }
}

工作原理

实际上，当您引用时，您以前的 url 是主页而不是 'wrong-id'，当警卫发送 false 时，以前的 url 变成主页并返回 false 将您带到以前的 url。我在这里所做的是允许该 url 被激活，因为我在 settimeout 中一直路由到 404，它会在导航到“错误 ID”后启动