Angular2路由到错误页面

Question

我的angular2核心模块是2.0.2，路由是3.0.2。

当我为rootRoute声明一个app.routes，为childRoute声明一个main.routes时，一些base html('/')会跳转到childRoute base（如/main），并显示错误的组件。

我已经在我的index.html中添加了base href="/"，router-outlet工作正常。

我非常确定文件引用是正确的（两个路由文件导出相同的名称“routes”）。

当我输入“/account”时，页面可以正确加载，唯一的问题是'/'将被加载为'/main'，我不知道原因。

其他路由功能良好，如“/account”，“/main”，“/main/hero”等。

以下是我的代码：

app.module

import {routes} from './app.routes';

@NgModule({
  imports:      [ BrowserModule, MainModule, routes, ReactiveFormsModule ],
  declarations: [ AppComponent, AccountComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ HeroService, TaskService ]
})
export class AppModule { }

app.routes

import {MAIN_ROUTES} from "./main/main.routes";

const APP_ROUTES: Routes = [
    { path:'', component: AccountComponent},
    { path:'account', component: AccountComponent},
    { path:'main', component: MainComponent, children: MAIN_ROUTES},
];
export const routes = RouterModule.forRoot(APP_ROUTES);

main.module

import {routes} from "./main.routes";

@NgModule({
  imports:      [ CommonModule, routes, HeroModule, ReactiveFormsModule,TaskModule ],
  declarations: [ MainComponent, ManageComponent],
  exports:      [ MainComponent]
})
export class MainModule { }

main.routes

export const MAIN_ROUTES: Routes = [
    { path:'hero', component: HeroComponent},
    { path:'task', component: TaskComponent},
    { path:'manage', component: ManageComponent},
    { path:'', component: TaskComponent}
];

export const routes = RouterModule.forChild(MAIN_ROUTES);

• 非英语母语者，抱歉我的英语不太好。如果我的问题让你困惑，请告诉我。

=========(更新)
奇怪的是我更改了我的main.routes.ts文件

export const MAIN_ROUTES: Routes = [
    { path:'main/hero', component: HeroComponent},
    { path:'main/task', component: TaskComponent},
    { path:'main/manage', component: ManageComponent},
    { path:'main', component: TaskComponent}
];

这个索引 (http://localhost:3000) 显示了正确的组件。
然而，'/main/hero' 和 '/main/main/hero' 都可以使用！
看起来子路径没有附加父路径。
有人能否重现问题？这里发生了什么？

- 鄭元傑

---

请问您能否发布一下您正在使用的HTML模板样例，以便触发此重定向？ - Gerard Simpson

我直接在浏览器中输入URL，而不是触发它。 - 鄭元傑

如果一个空路径路由没有子路由，则添加 pathMatch，如 { path:'', component: AccountComponent, pathMatch: 'full'},。同时使用 forChild() 添加的路由也不会自动成为子路由。这里已经有几个相关的问题了。 - Günter Zöchbauer

我在“app.routes”中添加了{ path:'', component: AccountComponent, pathMatch: 'full'}，并从我的main.routes中删除了main/。但仍然不正确。你说的“有几个相关的问题”是什么意思？ - 鄭元傑

Answer 1

我修改了代码，现在它可以工作了。 app.module.ts

@NgModule({
  imports:      [ BrowserModule, MainModule, routes, ReactiveFormsModule ],
  declarations: [ AppComponent, AccountComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ HeroService, TaskService ]
})
export class AppModule { }

app.routes.ts

const APP_ROUTES: Routes = [
    { path:'account', component: AccountComponent},
    { path:'main', component: MainComponent, children: MAIN_ROUTES},
    { path:'', component: AccountComponent},
    { path:'**', component: AccountComponent},
];

export const routes = RouterModule.forRoot(APP_ROUTES);

main.module.ts

@NgModule({
  imports:      [ CommonModule, RouterModule, HeroModule, ReactiveFormsModule,TaskModule ],
  declarations: [ MainComponent, ManageComponent, NavComponent],
  exports:      [ MainComponent]
})
export class MainModule { }

main.routes.ts

export const MAIN_ROUTES: Routes = [
    { path:'hero', component: HeroComponent},
    { path:'hero/:id', component: HeroDetailComponent},
    { path:'task', component: TaskComponent},
    { path:'task/:id', component: TaskDetailComponent},
    { path:'manage', component: ManageComponent},
    { path:'', component: TaskComponent, pathMatch:'full'}
];

主要的变化是我删除了"RouterModule.forChild(MAIN_ROUTES)"，并且在main.module.ts中直接引入"RouterModule"。
然后一切都运行良好。

- 鄭元傑