在父路径下创建详细视图 [英] Create a detail view under a parent route

问题描述

您肯定知道角度2教程中的英雄样本:

You surely know the heroes sample from angular 2 tutorial:

https://angular.io/resources/live-examples/toh-5/ts/plnkr.html

当您单击这4个顶级英雄之一时，您将从/dashboard网址转到detail/id网址.

When you click one of those 4 top heroes you get from the /dashboard url to the detail/id url.

将整个仪表板组件与详细信息组件切换就可以了！

That the whole dashboard component is switched with the detail component is fine!

我想更改的是url从/dashboard更改为/dashboard/detail/id

What I would like to have changed is that the url changes from /dashboard to /dashboard/detail/id

所以在我的路由配置中，我只是更改了

So in my route config I just change

path: '/detail/:id',

到

  path: '/dashboard/detail/:id',

可以，但是当更改仪表板网址时，/dashboard/detail/:id网址就不再有意义了.

That works but when the dashboard url is changed then the /dashboard/detail/:id url makes no sense anymore.

我想根据父"路线配置详细路线.

I would like to configure the detail route depending to the 'parent' route.

我该怎么做?

推荐答案

我已经更改了路由以显示其操作方法，请参见 plunkr .

I've changed routing to show how it can be done, see plunkr.

通常，它是使用非终端路由和子路由器完成的.

In general it is done using non-terminal routes and child routers.

{
  path: '/dashboard/...',
  name: 'Dashboard',
  component: DashboardComponent,
  useAsDefault: true
}

这篇关于在父路径下创建详细视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！