Angular 2 Child Routes

时间:2016-07-25 22:10:24

标签: angular angular2-routing angular-cli

我使用angular-cli工具创建我的路线。它创建一个前面带有+的文件夹,即

  • +dashboard
  • +document

我无法弄清楚如何使用angular-cli工具制作子路线。这无关紧要,但我更愿意在我的应用程序结构中采用一个约定的约定来描述子路径。

那我该怎么办?

我是否在父路线下放置一个文件夹,如下所示

  • app\+document\+chapter

做这种事情会更好吗

  • app\+document
  • app\+chapter

除此之外,我对一般的路线感到有点困惑。我的理解是,有一条弃用的路线和一条新路线。我想我正在使用新系统,因为它是使用angular-cli工具生成的。无论如何,我正在嵌套多个级别的子路线。我想知道这看起来是否合法。

@Routes([
  { path: '/', component: DashboardComponent },
  { path: '/document/:id', component: ReaderComponent,
      children: [
          { path: '', redirectTo: 'chapter/0', pathMatch: 'full' },
          { path: 'chapter/:id', component: ChapterComponent,
            children: [
              { path: '', redirectTo: 'para/0', pathMatch: 'full' },
              { path: 'para/:id', component: ParagraphComponent }
           ]}
      ]
  }
])

所以http://my-url/document/1应该带我去http://my-url/document/1/chapter/0/para/0这是最好的方法吗?我喜欢它,因为它允许深度链接等。它也显示redirectTo不起作用。

但我对这一切都有点新意,我希望尽可能将我的应用程序设计保持为“传统”

1 个答案:

答案 0 :(得分:1)

似乎你混合了来自不同的不兼容路由器版本的东西。 @Routes()来自较旧的路由器版本,但您的路由配置是针对最新的路由器版本。

有关如何配置新路由器的信息,请参阅https://angular.io/docs/ts/latest/guide/router.html#!#route-config