Почему у CrisisCenterRoutes свойство Children, а у HeroesRoutes нет?

Когда вы смотрите на пример угловых 2 героев:

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

Есть ссылка CrisisCenter и Heroes.

Оба отображают список вещей, или вы можете редактировать вещь по идентификатору.

Но 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

Так для чего же нужна эта детская собственность?


angular angular2-router3
person Pascal    schedule 25.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Дочерний компонент будет отображаться сначала в родительском компоненте (здесь в маршрутизаторе-выходе CrisisCenterComponent), а затем в следующем маршрутизаторе-выходе (в этом примере AppComponent); Кроме того, путь дочернего компонента будет добавлен (расширен) к родительскому пути с / между.

Вы можете найти описание angular2 для этого по адресу: https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component

Обратите внимание, что родительский маршрут /кризисный центр имеет дочернее свойство с массивом из двух маршрутов. Эти два маршрута направляют к двум дочерним компонентам Кризисного центра, CrisisListComponent и CrisisDetailComponent.

Существуют некоторые важные различия в трактовке этих маршрутов.

Во-первых, маршрутизатор отображает компоненты этих дочерних маршрутов в RouterOutlet компонента CrisisCenterComponent, а не в RouterOutlet оболочки AppComponent.

Во-вторых, дочерние пути расширяют путь своего родительского маршрута.

Обычно пути, начинающиеся с /, относятся к корню приложения. Здесь они добавляются к пути к CrisisCenterComponent.

Чтобы написать URL-адрес, который ведет к CrisisListComponent, мы должны добавить его дочерний путь маршрута / к /crisis-center.

Чтобы написать URL-адрес, который ведет к CrisisDetailComponent, мы должны добавить путь дочернего маршрута, /, за которым следует идентификатор кризиса, что даст что-то вроде:

Вот возможный способ использования этого (основные преимущества: все маршруты бизнес-функций/объектов в одном месте И совместное использование общего шаблона - Dashboard - между различными бизнес-действиями функций/объектов):

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 для (Dashboard) может быть таким:

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

При таком подходе вы можете использовать общее меню для различных опций функций (таких как список, новое и редактирование).

person Gabi    schedule 25.06.2016
comment
Теперь я понимаю, почему разница не в пользовательском интерфейсе, а в коде с дополнительным компонентом маршрута CrisisCenter. Это просто плохой вариант использования, который они создали здесь, что не имеет смысла - по крайней мере, для меня. Хорошим вариантом использования для этого дополнительного CrisisCenter_RouterOutlet может быть toolbar.format.component, используемый для CrisisDetailComponent и CrisisListComponent, который вы не хотите размещать в оба компонента. И этот компонент панели инструментов имеет свои собственные html, css, сервисы. Вы согласны с моими мыслями, Габи? - person Pascal; 26.06.2016
comment
Да, Паскаль, вы правы в том, насколько ясно описано преимущество использования такой возможности. Однако я думаю, что это также вопрос выбора (есть и может быть использован). Лично я постараюсь использовать его, когда захочу описать в одном месте все возможные производные правила (скажем, для компонента). Я включил в ответ пример. Я надеюсь, что это прояснит мою точку зрения, Ура - person Gabi; 26.06.2016