组件没有路由配置 - 嵌套路由 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']

我收到错误：

组件'ChildComponent'没有路由配置。

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

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

一切正常（RouterLink 相同）。

问题：我的错误在哪里？

更新：当我只使用一个简单的 url 时，嵌套路由也不起作用：例如http://server/parent/child/1网址

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 路由视为一个整体，相反，角度路由器将child/:id 路由分成两个路由段child 和 :id 然后使用 child 路由的定义将您带到 ChildComponent，然后在 ChildComponent 中查找 :id 段的路由定义，但它找不到任何。通过将 child 路由重命名为 childs，我们强制 angular 将 child/:id 作为一个整体，并将我们带到 ChildComponent 作为我们想要的最终目的地。

深层链接

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

当我只使用一个简单的 url 时，嵌套路由也不起作用： 例如http://server/parent/child/1

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

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

更新： 看起来这是一个known bug in RC1 并且更改路线的顺序可以使一切正常工作。请参阅 David 的回答以获取示例。

Answer 2

我的天啊，我刚刚切换了二级路线的顺序，它起作用了：

@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

Answer 3

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

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

父组件：

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 }
])