Угловые 2 вспомогательные маршруты маршрутизатора, не работающие на redirectTo

Question

Недавно я начал новый проект на основе углового 2.0.0 в сочетании с угловым маршрутизатором (V3.0.0). Таким образом, у меня есть проблемы со вспомогательными маршрутами.

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

Angular Router Talk @AC2015

Я настроил мои файлы следующим образом:

app.html

<router-outlet name="navigation"></router-outlet> 

<main> 
    <router-outlet></router-outlet> 
</main> 

<router-outlet name="footer"></router-outlet> 

app.routes.ts

import {Routes} from '@angular/router'; 

export const rootRouterConfig: Routes = [ 
    {path: '', redirectTo: 'start(navigation:/navigation)', pathMatch: 'full'} 
]; 

start.routes.ts

import {Routes} from '@angular/router'; 
import {StartContentComponent} from './startContent/startContent.component'; 
import {StartNavigationComponent} from "./startNavigation/startNavigation.component"; 

export const startRouterConfig: Routes = [ 
    {path: 'start', component: StartContentComponent}, 
    {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'} 
]; 

Теперь проблема: Если я вручную ввести

http://localhost:3000/#/start(navigation:/navigation) 

в URL браузера оба компонента отображаются правильно. Но редирект в app.routes.ts не работает, и я получаю следующее сообщение об ошибке при доступе к http://localhost:3000/#/:

Uncaught (in promise): Error: Cannot match any routes: ''

Официальные Угловые 2 документов ничего не говорит о вспомогательной маршрутизации пока только то, что он будет обсуждаться в будущем. Кроме того, я нашел несколько других блогов, но ни один из них не обсуждал вспомогательные маршруты в сочетании с переадресацией.

Кто-нибудь знает, в чем моя проблема, или имеют похожие проблемы?

Есть ли другой подход к структурированию моей страницы для достижения того, чего я хочу?

Должен ли я переключаться на Ui-router?

Answer 1

У меня была такая же проблема, и решение г-на Бинара показалось на правильном пути, но часть «Componentless Routes» из this site доставила меня туда.

Мое решение:

export const RedirectionIncludingAuxRoutes: RouterConfig = [ 
    { 
     path: 'redirect-me', 
     redirectTo: 'redirected-with-aux' 
    }, 
    { 
     path: 'redirected-with-aux', 
     children: [ 
      { 
       path: '', 
       component: PrimaryComponent 
      }, 
      { 
       path: '', 
       component: SecondaryComponent, 
       outlet: 'auxiliary' 
      } 
     ] 
    } 
] 

Answer 2

Рекомендуемый подход, когда у вас есть другие сменные детали.
Во всяком случае попробуйте изменить

redirectTo: 'start(navigation:/navigation)' 
to 
redirectTo: 'start/(navigation:navigation)' 

И

{path: 'start', component: StartContentComponent}, 
{path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'} 
to 
{path: 'start', component: StartContentComponent, 
    children: [ 
     {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'} 
]}, 

Также я бы рекомендовал эту статью на маршрутизатор:
http://blog.angular-university.io/angular2-router/

Answer 3

Вы почти там. Всего в одном шаге.Вы должны подключить rootRouterConfig в одном из следующих способов

import {Routes , RouterModule } from '@angular/router'; 

@NgModule({ 
    imports: [RouterModule.forRoot(rootRouterConfig)], 
    exports: [RouterModule], 
}) 

ИЛИ

import {ModuleWithProviders } from '@angular/core'; 
import {Routes , RouterModule } from '@angular/router'; 

export const routing: ModuleWithProviders =RouterModule.forRoot(rootRouterConfig); 

Позвольте мне знать, какой из них работает для вас.