Question

使用Angular 2 beta.0

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

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

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

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

@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，我没有看到并行添加嵌套路由

Answer 1

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

@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> ..

Answer 2

如果您要做的是使用一个子组件中的 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>

从嵌套组件中使用RouterLink

2 个答案: