为什么 CrisisCenterRoutes 有 Children 属性而 HeroesRoutes 没有？

Question

当你查看angular 2个英雄样本时：

http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

有 CrisisCenter 和 Heroes link

两者都呈现事物列表，或者您可以通过 ID 编辑事物。

但是除了

之外，RoutesConfig 完全不同

redirectTo: '/crisis-center',

CrisisCenter 有一条路线 children 属性:

children: [
      {
        path: 'admin',
        component: CrisisAdminComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'edit/:id',
        component: CrisisDetailComponent,
        canDeactivate: [CanDeactivateGuard]
      },
      {
        path: '',
        component: CrisisListComponent
      }
    ]

当我在 angular 2 网站上搜索时：https://angular.io/docs/ts/latest/glossary.html#!#stq=router&stp=1

for "children" 我不知道 children 属性的用途。

当我看大侠RoutesConfig:

export const HeroesRoutes: RouterConfig = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

没有children属性。我也可以让英雄加载到根页面上： http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

那么 children 属性有什么用呢？

Answer 1

子组件将首先显示到父组件（这里是 CrisisCenterComponent router-outlet），然后显示到下一个 router-outlet（在本例中是 AppComponent）；另外，子组件路径将添加（扩展）到父路径，中间有“/”。

您可以在以下位置找到 angular2 描述：https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component

Notice that the parent /crisis-center route has a children property with an array of two routes. These two routes navigate to the two Crisis Center child components, CrisisListComponent and CrisisDetailComponent.

There are some important differences in the treatment of these routes.

First, the router displays the components of these child routes in the RouterOutlet of the CrisisCenterComponent, not in the RouterOutlet of the AppComponent shell.

Second, the child paths extend the path of their parent route.

Normally paths that begin with / refer to the root of the application. Here they are appended to the path to the CrisisCenterComponent.

To write an URL that navigates to the CrisisListComponent, we'd append its child route path, /, to /crisis-center.

To write an URL that navigates to the CrisisDetailComponent, we'd append the child route path, /, followed by the crisis id, yielding something like:

这是一种可能的使用方法（主要优点是：所有业务 feature/object 路线都集中在一个地方并共享一个通用模板 - 仪表板 - 在不同的 feature/object 业务操作之间）：

import { RouterConfig }          from '@angular/router';

import { Object1Dashboard } from './object1.dashboard';
import { Object1List } from './object1.list';
import { Object1New } from './object1.new';
import { Object1Edit } from './object1.edit';

export const Object1Routes: RouterConfig = [
    {
        path: 'object1',
        component: Object1Dashboard,
        'children': [
            { path: '', component: Object1List },
            { path: 'new', component: Object1New },
            { path: 'edit/:id', component: Object1Edit }
        ]
    }
];

（仪表板）的 html 可以是这样的：

<h2> Dashboard</h2>
<div>
   <p>
      <a [routerLink]="['/object1']">View</a>
      <a [routerLink]="['/object1/new']">New</a>
   </p>
   <p><router-outlet></router-outlet></p>
</div>

通过这种方法，您可以在不同的功能选项（如列表、新建和编辑）之间共享一个通用菜单

为什么 CrisisCenterRoutes 有 Children 属性而 HeroesRoutes 没有？

Why has CrisisCenterRoutes a Children property and HeroesRoutes not?

angular2-router3

angular

为什么 CrisisCenterRoutes 有 Children 属性 而 HeroesRoutes 没有？

Why has CrisisCenterRoutes a Children property and HeroesRoutes not?

angular2-router3

angular

为什么 CrisisCenterRoutes 有 Children 属性而 HeroesRoutes 没有？