8

使用 Angular 2 beta.0

我有一个像这样的组件结构

App (Has RouteConfig)
 -> List 
 | -> ListItem (Want to use RouterLink from here)

这会导致错误：Component "List" has no route config.

所以我像这样在组件上放了一个 RouteConfig List......

@RouteConfig([
  {path: '/:id', name: 'Details', component: Detail}
])

但我得到一个角度错误Error: Child routes are not allowed for "/list". Use "..." on the parent's route path.

我尝试在该路由配置中的 /list 路径之前和之后添加这 3 个点......但没有成功。

路由器上的文档非常简单，虽然我知道这应该基于 ui-router，但我没有看到添加嵌套路由的并行

4

2 回答 2

19

您可以在父组件中像这样使用它：

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/list/...', component: ListComponent, as: 'List'}
])

然后在你的ListComponent，定义你的子路线：

@RouteConfig([
  { path: '/:id', component: ListItem, as: 'ListItem' }
])

确保ListComponent也有一个<router-outlet></router-outlet>..

于 2015-12-29T09:25:54.917 回答
0

如果您要做的是使用一个子组件中的routerLink来实际转到您父级配置的路由之一，那么您不需要在子级上放置任何RouterConfig，您只需要确保该路由在您的父级中正确配置，然后在子级装饰器内的子级指令属性中添加ROUTER_DIRECTIVES常量。

它会是这样的：

家长：

import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
        :
    (some more imports)
        :
@Component({
        :
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
        :
})

@RouteConfig([
  {path: '/:id', name: 'Details', component: Detail}
])

孩子：

import { ROUTER_DIRECTIVES } from 'angular2/router';
    :
    :
@Component({
    :
    directives: [ROUTER_DIRECTIVES],
    :
})

另外，不要忘记通过提供要发送用户的路由作为数组的第一个参数来正确配置您的routerLink ，然后使用您给它们的相同名称将要发送的参数添加到目标路由在RouteConfig中，如下所示：

<a [routerLink]="['Details', { id: product.productId }]"> Details link </a>
于 2016-08-12T20:39:57.940 回答