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

Question

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

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

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

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

Answer 1

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

在您的情况下，我只会为“ / 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;
    }
}