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

Question 1

Если вы посмотрите на образец angular 2 heroes:

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

Есть ссылки CrisisCenter и Герои .

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

Но RoutesConfig полностью отличается от

redirectTo: '/crisis-center',

У CrisisCenter есть свойство route 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

Для "детей" я не получаю информации, для чего это свойство children.

Когда я смотрю на героев RoutesConfig:

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

Детской собственности нет. Я также могу заставить Героев загружаться на корневой странице: http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

Так чем же хороша эта детская собственность?

angular angular2-router3

0

Pascal 26 Июн 2016 в 00:40

Answer

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

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

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

Есть несколько важных различий в использовании этих маршрутов.

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

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

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

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

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

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

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 для (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>

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

1

Community 20 Июн 2020 в 12:12

1

Теперь я понимаю, почему нет разницы в пользовательском интерфейсе, а в коде с дополнительным CrisisCenter RouteComponent. Это просто плохой вариант использования, который они создали здесь, который не имеет смысла - по крайней мере, для меня. Хорошим вариантом использования этого дополнительного CrisisCenter_RouterOutlet может быть toolbar.format.component, используемый для CrisisDetailComponent и CrisisListComponent, который вы не хотите помещать в оба компонента. И у этого компонента панели инструментов есть свои html, css, сервисы. Вы согласны с моими мыслями Габи?

–

Pascal

26 Июн 2016 в 12:57

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

–

Gabi

26 Июн 2016 в 21:13

Question 2

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

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

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

Есть несколько важных различий в использовании этих маршрутов.

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

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

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

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

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

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

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 для (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>

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

1

Community 20 Июн 2020 в 12:12

1

Теперь я понимаю, почему нет разницы в пользовательском интерфейсе, а в коде с дополнительным CrisisCenter RouteComponent. Это просто плохой вариант использования, который они создали здесь, который не имеет смысла - по крайней мере, для меня. Хорошим вариантом использования этого дополнительного CrisisCenter_RouterOutlet может быть toolbar.format.component, используемый для CrisisDetailComponent и CrisisListComponent, который вы не хотите помещать в оба компонента. И у этого компонента панели инструментов есть свои html, css, сервисы. Вы согласны с моими мыслями Габи?

–

Pascal

26 Июн 2016 в 12:57

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

–

Gabi

26 Июн 2016 в 21:13

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

1 ответ

Похожие вопросы

Новые вопросы

angular