angular-ui-router - Angular 2 组件路由

Question

我打算开始学习 Angular 2 组件路由器。

我大量使用 Angular ui-router。我的所有项目都使用 UI-router 复杂功能，例如嵌套状态和嵌套命名 View 。

使用 Angular 2 组件路由器有什么好的开始？

如何在 Angular 2 组件路由器中配置嵌套状态？

Answer 1

总而言之，我想说 Angular 2 中的路由非常简单且直观

我建议阅读 router docs获取所有基础知识。

请记住，子组件也可以有路由。他们从其父路线构建。

app.component.ts(摘录)

@Component({ ... })
@RouteConfig([
  {path:'/crisis-center/...', name: 'CrisisCenter', component: CrisisListComponent},
  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent},
  {path:'/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
])
export class AppComponent { }

crisis-center.component.ts(摘录)

@RouteConfig([
  {path:'/',         name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true},
  {path:'/:id',      name: 'CrisisDetail', component: CrisisDetailComponent}
])

Notice that the path ends with a slash and three trailing periods (/...).

That means this is an incomplete route (AKA a non-terminal route). The finished route will be some combination of the parent /crisis-center/ route and a route from the child router that belongs to the designated component.

All is well. The parent route's designated component is the CrisisCenterComponent which is a Routing Component with its own router and routes.

来自angular.io router guide