组件没有路线配置-嵌套路线angular2 RC1 [英] Component does not have route configuration - nested routes angular2 RC1

问题描述

我有嵌套路线.

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

第二层路线具有参数.

Second level route has parameters.

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

当我使用RouterLink导航时:

When I navigate with RouterLink:

['/parent/child/1']

我遇到错误:

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

Component 'ChildComponent' does not have route configuration.

如果我将嵌套路线更改为一级(平坦)路线:

If I change nested route to one level (flat) route:

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

一切正常(RouterLink相同).

than everything works normally (RouterLink is same).

问题:我的错误在哪里?

Question: Where is my mistake?

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

推荐答案

问题:

此错误消息的原因是，使用新的Angular 2 RC1路由，您实际上是在构建路由树，因此当您请求'/parent/child/1'时，您的倒数第二个路由段(/child/)将您带入ChildComponent和有角度的外观进入ChildComponent以查看是否有任何路由可以匹配到下一个段(/1)，并且由于您没有在ChildComponent中定义任何路由，因此会抛出此异常:

The reason for this error message is that with new Angular 2 RC1 routing, you are essentially building a route tree so when you ask for '/parent/child/1' your second last route segment (/child/) sends you into ChildComponent and angular looks into ChildComponent to see if there are any routes that it can match to the next segment being (/1) and since you do not have any routes defined in ChildComponent it throws this exception:

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

解决方案:

像您一样在AppComponent中定义(扁平)路由树绝对是解决此问题的一种方法.另一种方法是通过将ParentComponent中的路由更改为以下方式来区分第二级路由:

Defining your (flat) route tree in the AppComponent like you did is definitely one way to deal with this issue. The other way is to differentiate your second level routes by changing your routes in ParentComponent to:

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

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

Basically we are creating two branches being childs and child/:id both routed to ChildComponent.

为什么定义childs路线有效?

Why defining a childs route works?

当还定义了名为child的路由时，基本Angular 2 RC1路由器不会将child/:id路由视为一个整体，而是，角路由器将child/:id路由分为以下两个路由段: child和:id，然后使用child路由的定义将您带到ChildComponent，然后在找不到任何子组件的ChildComponent中查找:id段的路由定义.通过将child路径重命名为childs，我们迫使angular将child/:id作为一个整体，并将我们带到ChildComponent作为最终目标，这是我们想要的.

Basically Angular 2 RC1 router does not treat child/:id route as a whole when a route named child is also defined, instead, angular router breaks child/:id route into two route segments of child and :id and then use the definition for the child route to take you to the ChildComponent and then look for a route definition for the :id segment in ChildComponent which it couldn't find any. By renaming child route to childs we are forcing angular to take child/:id as a whole and take us to ChildComponent as the final destination which is what we want.

深层链接

关于第二个带有深层链接的问题:

As for your second issue with deep links:

仅使用一个简单的网址时，嵌套路由也不起作用: 例如 http://server/parent/child/1

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

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

Assuming that you are using the default PathLocationStrategy as your LocationStrategy, you need to make sure your web server serves the index.html file for each route path. For example, in live server I add the following argument to the web server startup command:

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

更新: 看起来这是 RC1中的已知错误，更改路线的顺序会使一切正常工作.请参阅大卫的答案作为示例.

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.

这篇关于组件没有路线配置-嵌套路线angular2 RC1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！