Angular 2 个路由器辅助路由在 redirectTo 上不起作用

Question

我最近开始了一个基于 angular 2.0.0 并结合 Angular Router (V3.0.0) 的新项目。因此，我对辅助路线有疑问。

我想将我的应用程序分成不同的视图，这些视图出现在导航栏、主要内容、页脚等每个状态下。这样当用户与网站交互时，只有需要更改的页面部分(f.e. the content) 被更改，所有其他视图保持原样。因此我想使用本次演讲中讨论的路由器辅助功能：

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: ''

官方Angular2文档没有提到辅助路由，只是说以后会讨论。除此之外，我发现了其他一些博文，但其中 none 讨论了辅助路由与重定向的结合。

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

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

我应该切换到 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

我遇到了同样的问题，二进制先生的解决方案似乎是在正确的轨道上，但是 this site 的 'Componentless Routes' 部分让我到达了那里。

我的解决方案：

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

Angular 2 个路由器辅助路由在 redirectTo 上不起作用

Angular 2 router auxiliary routes not working on redirectTo

routing

angular-routing

angular