Angular2 ребенок маршруты не работает

Question

Я использую @angular RC4 "@angular/router": "^3.0.0-beta.2"

Я не был в состоянии получить дочерние маршруты работают, когда я начала добавлять дочерние маршруты я получаю много видов ошибок: Вот мой маршрут код :

{ path: '', redirectTo: 'parentComp'}, 
{ path: 'parentComp', component: parentContainer, 
     children: [ 
      {path: 'componenta', component: ComponentA } 
     ] 
    } 

EXCEPTION: Error during instantiation of Router!.BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL EXCEPTION: Error: Invalid route configuration of route '{path: "", redirectTo: "activity"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423

Так я добавить pathMatch:

{ path: '', redirectTo: 'parentComp', pathMatch: 'full'}, 
{ path: 'parentComp', component: ActivityContainer, 
    children: [ 
     {path: 'componenta', component: ComponentA } 
    ] 
} 

Вот ошибка я получаю:

app/bootstrapper.routes.ts(5,7): error TS2322: Type '({ path: string; redirectTo: string; pathMatch: string; } | { path: string; component: typeof pare...' is not assignable to type 'Route[]'. Type '{ path: string; redirectTo: string; pathMatch: string; } | { path: string; component: typeof paren...' is not assignable to type 'Route'.

я понял, что многие из ответов, написанных были о том, чтобы обязательно использовать правильную версию, но я использую правильную последние один для маршрутов, так же, как в angular.io Таким образом, у меня также есть устаревший маршрутизатор вместе с ним, чтобы уменьшить количество ошибок, которые появляются, но все же, я не смог заставить дочерние маршруты работать.

У меня есть моя оболочка, которая будет загружать в свой маршрутизатор-выход маршруты, но в минуту, когда я иду на детские маршруты, ничего не работает. Помогите оценить.

Благодаря

Answer 1

Угловая маршрутизатор рассматривает маршрут с детьми как нетерминальный маршрутом и маршрутизация происходит только терминальные маршруты. Угловой маршрутизатор ожидает, что маршрут будет иметь запись по умолчанию для пути: ''. Сын в вашем случае вы должны добавить ниже код в детском массиве

children: [ 
     {path: '', redirectTo: componenta, pathMatch: 'full'} 
    ] 

Кроме того, когда мы используем redirectTo стратегия pathMatch должна быть full, как мы хотим, чтобы точное совпадение пути перенаправления. Если мы сохраним prefix (не указывая при этом префикс по умолчанию), это приведет к тому, что угловое число будет соответствовать множеству маршрутов к этой записи и вызовет различные ошибки.

Смотрите этот вопрос для дальнейшего detail

Вы должны избавиться от любого импорта маршрутизатора-нежелательны точки ошибки несоответствия между маршрутной декларацией и поставщиком маршрута. Для обеспечения маршрутизаторов необходимо использовать код ниже в компоненте bootstrap.

provideRouter(routes)// routes is array of routes defined in your code. 

Также взгляните на отличный article. В статье на версии alpha8 но бета2 не каких-либо серьезных изменений, за исключением terminal:true заменяется pathMatch:full

Answer 2

Попробуйте redirectTo: '/parentComp' вместо redirectTo: 'parentComp'.

Answer 3

Имя класса компонента должно быть написано в верхнем корпусе верблюда и заканчиваться словом «Компонент». Учебное пособие объясняет это в одном из своих первых разделов: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html.

Пример их применения:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'hero-detail', 
}) 
export class HeroDetailComponent { 
} 

Затем затем добавить его к маршрутизатору:

{ path: 'detail/:id', component: HeroDetailComponent }, 

Попробуйте изменить имена классов компонентов и перекомпиляции