Angular 2路由器辅助路由不适用于redirectTo

Question

我最近开始了一个基于 Angular 2.0.0 和 Angular Router (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/#/ 时出现以下错误：

未捕获（承诺中）：错误：无法匹配任何路由：''

Angular 2 的官方文档没有提及辅助路由，只是表示将来会讨论它。除此之外，我还发现了其他一些博文，但没有一篇文章讨论了辅助路由与重定向的结合。

有人知道我的问题是什么或有类似的问题吗？

是否有另一种方法来构建我的页面以实现我想要的？

我应该切换到 Ui-router 吗？

Answer 1

当您有更多变化的零件时，这是推荐的方法。
无论如何尝试改变

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 2

你快到了。仅一步之遥。您需要通过以下方式之一连接 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);

让我知道哪一个适合你。

Answer 3

我遇到了同样的问题，Binary 先生的解决方案似乎走上了正轨，但 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'
            }
        ]
    }
]