组件没有路由配置 - 嵌套路由 angular2 RC1

Question

我有嵌套路线。

@Routes([
{ path: "/", component: RootComponent },
{ path: "/parent", component: ParentComponent }])

二级路由有参数。

@Routes([
{ path: "/:id", component: ChildComponent },
{ path: "/child/:id", component: ChildComponent }]) //same component

当我使用 RouterLink 导航时：

['/parent/child/1']

我遇到错误：

Component 'ChildComponent' does not have route configuration.

如果我将嵌套路由更改为一级（平面）路由：

@Routes([
{ path: "/", component: RootComponent },
{ path: "/parent", component: ParentComponent },
{ path: "/child/:id", component: ChildComponent }])

比一切正常（RouterLink 相同）。

问题：我的错误在哪里？

Update: Nested route also do not works when I use just a simple url: e.g. http://server/parent/child/1 url

Answer 1

问题：

此错误消息的原因是使用新的 Angular 2 RC1 路由，您实际上是在构建路由树，因此当您请求 '/parent/child/1' 您的倒数第二个路由段时（/child/) 将您发送到 ChildComponent 并且 angular 查看 ChildComponent 以查看是否有任何路由可以匹配到下一个段 (/1) 并且因为您没有在 ChildComponent 中定义任何路由它抛出这个异常：

Cannot match any routes. Current segment: '1'. Available routes: [].

解决方案：

像您一样在 AppComponent 中定义您的（平面）路由树绝对是解决此问题的一种方法。另一种方法是通过将 ParentComponent 中的路由更改为来区分您的二级路由：

@Routes([
    { path: 'childs', component: ChildComponent },    
    { path: 'child/:id', component: ChildComponent },            
])

基本上我们正在创建两个分支 childs 和 child/:id 都路由到 ChildComponent。

为什么定义 childs 路由有效？

基本上 Angular 2 RC1 路由器 而不是 当一个名为 child 的路由也被定义时将 child/:id 路由视为一个整体，而不是, angular 路由器将 child/:id 路由分成 child 和 :id 两个路由段，然后使用 child 路由的定义将您带到 ChildComponent 和然后在 ChildComponent 中查找 :id 段的路由定义，但找不到。通过将 child 路由重命名为 childs 我们强制 angular 将 child/:id 作为一个整体并将我们带到 ChildComponent 作为我们想要的最终目的地。

深层链接

关于深层链接的第二个问题：

Nested route also do not works when I use just a simple url: e.g. http://server/parent/child/1

假设您使用默认 PathLocationStrategy 作为您的 LocationStrategy，您需要确保您的网络服务器为每个路由路径提供 index.html 文件。例如，在实时服务器中，我将以下参数添加到 Web 服务器启动命令中：

live-server --entry-file=index.html

Update: Looks like this is a known bug in RC1 and changing the order of the Routes makes everything to work correctly. Please see David's answer for an example.

Answer 2

定义路由时，可以通过添加此语法“/...”来定义路由不终止。

对于你的父路由，你应该这样写：

父组件：

import {TestComponent} from '';
@Routes([
    { path: "/", component: RootComponent },
    { path: "/parent/...", name: 'Parent', component: TestComponent }
])

名为 TestComponent 的子组件：

@Routes([
    {path: '/:id', name: 'Id', component: ChildComponent },
    {path: '/child/:id', name: 'ChildId', component: ChildComponent }
])

Answer 3

我的天啊，我刚刚切换了二级路由的顺序并且成功了：

@Routes([
{ path: "/child/:id", component: ChildComponent },
{ path: "/:id", component: ChildComponent }]) //same component

有效，但不知道为什么。

我确定这些是 url 映射：

http://localhost/parent/1 -> 选择第二个配置
http://localhost/parent/child/1 -> 选择第一个配置

更新

正如它所显示的那样，这是目前已知的问题：https://github.com/angular/angular/issues/8420

组件没有路由配置 - 嵌套路由 angular2 RC1

Component does not have route configuration - nested routes angular2 RC1

angular

angular2-routing