Angular 2：多个组件的一条路径？

Question

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

我已经尝试过使用 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
}

在中间组件的模板中，您可以根据“loggedIn”状态调用公共或私有组件：

{
    path: 'tracker',
    component: TrackingListComponent
}

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

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