url - 角度 2 : One path for multiple components?

Question

我正在尝试在 Angular 8 上创建一条路由，其中​​某个路径具有公共(public)和私有(private)版本，因此如果我在 URL 中输入/tracker，路由模块可以将我发送到私有(private)/公共(public)版本，具体取决于我是登录还是登录出去。

我已经尝试过使用 CanActivate 的 Guards，但是如果我返回 false，这只会停止导航，并且我特别需要两条路线具有相同的路径。这是我的路由模块:

    path: '',
    children: [
      {
        path: '',
        canActivate: [AuthGuard],
        component: TrackingListPrivateComponent
      },
      {
        path: '',
        component: TrackingListComponent
      }
    ]
  }

我希望能够在注销时在 URL 上输入/tracker 并导航到 TrackingListComponent，并在登录后在 URL 上输入/tracker 并导航到 TrackingListPrivateComponent。

Answer 1

在路由配置中两次使用相同的路由并不是一个好习惯，我什至不确定这在技术上是否可行。

在您的情况下，我只会为“/tracker”创建一个路由，并在中间组件中处理“登录”或“注销”状态:

{
    path: 'tracker',
    component: TrackingListComponent
}

在中间组件的模板中，您可以根据“登录”状态调用公共(public)或私有(private)组件:

<app-tracking-list *ngIf="!loggedIn"></app-tracking-list>
<app-private-tracking-list *ngIf="loggedIn"></app-private-tracking-list>

您的中间 TrackingListComponent 需要一个返回登录状态的函数:

class TrackingListComponent {
    /** Return login status */
    get loggedIn(): boolean {
        return this.loginService.loggedIn;
    }
}