javascript - 使用 Angular 2 进行子路由

Question

我对 Angular 2 非常陌生。我试图使用登录和仪表板页面构建一个简单的应用程序。我需要了解如何根据我的应用程序需要应用路由。

登录页面是一个独立的路由配置，但我希望在登录时，新的仪表板页面带有导航栏和它自己的<router-outlet> 。

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register-user', component: RegisterUserComponent },
    //APPLICATION ROUTES WITH OWN <router-outlet>
    { path: '**', redirectTo: 'login' }
]

早期在 Angular 1 中，我们使用了具有抽象状态和子状态的 ui-router。

请建议我们如何实现这一目标。

Answer 1

工作中的plunkr

https://plnkr.co/edit/MqNv6RyQvzsiZTp0Dkpf?p=preview

创建一个 ContainerComponent，它应该拥有自己的 router-outlet 和 routerLinks。

默认情况下，始终使用redirectTo加载到任何组件

{ path: 'component-two', component: ComponentTwo,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }