Question

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

未捕获（承诺）：错误：无法匹配任何路线：＆＃39;＆＃39;

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

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

是否有其他方法来构建我的页面以实现我想要的？

我可以切换到Ui路由器吗？

Answer 1

我遇到了同样的问题，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'
            }
        ]
    }
]

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],
})

OR

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

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

让我知道哪一个适合你。

Angular 2路由器辅助路由不在redirectTo上工作

3 个答案: