时间戳

首页 > 解决方案 > Angular 2：多个组件的一条路径？

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

问题描述

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

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

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

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

标签： urlcomponentsangular2-routing

解决方案

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

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

{
    path: 'tracker',
    component: TrackingListComponent
}

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

<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;
    }
}

推荐阅读