Question

当你看到角度2英雄样本时：

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

有危机中心和英雄链接

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

但是除了

之外，RoutesConfig完全不同

redirectTo: '/crisis-center',

CrisisCenter有一条路线儿童财产：

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

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

for＆＃34; children＆＃34;我得不到那些儿童财产的信息。

当我看着英雄RoutesConfig：

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

没有儿童财产。我也可以在根页面上加载Heroes： http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

那么对于那些儿童财产有益的是什么？

Answer 1

子组件将首先显示在父组件中（此处位于CrisisCenterComponent路由器插座中），然后显示到下一个路由器插座（在此示例中为AppComponent）;此外，子组件路径将添加（扩展）到父路径与＆＃34; /＆＃34;之间。

您可以在https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component

找到angular2说明

请注意，父/危机中心路线有一个子属性，其中包含两个路径的数组。这两条路线导航到两个危机中心子组件，CrisisListComponent和CrisisDetailComponent。

这些途径的治疗存在一些重要差异。

首先，路由器在CrisisCenterComponent的RouterOutlet中显示这些子路由的组件，而不是在AppComponent shell的RouterOutlet中。

其次，子路径扩展其父路径的路径。

通常以/引用应用程序根目录的路径。这里它们被附加到CrisisCenterComponent的路径。

要编写导航到CrisisListComponent的URL，我们将其子路径路径/ /附加到/ crisis-center。

要编写导航到CrisisDetailComponent的URL，我们会附加子路径路径/，后跟危机ID，产生类似的内容：

这是一种使用它的可能方式（主要优点是：所有业务功能/对象路由在一个地方并共享一个公共模板 - 仪表板 - 在不同的功能/对象业务操作之间）：

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 }
        ]
    }
];

和（仪表板）的htmls可以是：

<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 a Children属性和HeroesRoutes不是？

1 个答案: