从嵌套组件使用 RouterLink

本文介绍了从嵌套组件使用 RouterLink的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 Angular 2 beta.0

Using Angular 2 beta.0

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

I have a component structure like so

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

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

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

So I put a RouteConfig on the List component like so...

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

但是我收到了一个像 Error: Child routes are not allowed for "/list" 这样的 angular 错误.在父路由路径上使用...".

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

I have tried adding these 3 dots before and after the /list path in that route config... with no success.

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

The documentation on router is very light and though I know this is supposed to be based off of ui-router, I'm not seeing the parallel to add nested routes

推荐答案

你可以这样使用，在父组件中:

You can use it like this, in parent component:

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

然后在您的 ListComponent 中，定义您的子路由:

And then in your ListComponent, define your child routes:

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

确保 ListComponent 也有一个 ..

Make sure the ListComponent has a <router-outlet></router-outlet> as well..

这篇关于从嵌套组件使用 RouterLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

routerLink