0

当您查看 angular 2 hero 示例时：

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

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

对于“儿童”，我不知道儿童财产的用途。

我看大侠RoutesConfig的时候：

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

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

那么，儿童财产有什么用呢？

4

1 回答 1

1

一个子组件将首先显示到父组件中（这里是 CrisisCenterComponent 路由器出口），然后是下一个路由器出口（本例中是 AppComponent）；此外，子组件路径将被添加（扩展）到父路径中，“/”之间。

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

请注意，父 /crisis-center 路由有一个children 属性，其中包含两个路由的数组。这两条路由导航到两个 Crisis Center子组件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 }
        ]
    }
];

并且（仪表板）的 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>

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

于 2016-06-25T23:02:50.770 回答