Angular2路由到错误的页面答案

【问题标题】：Angular2 routing to wrong pageAngular2路由到错误的页面
【发布时间】：2016-11-02 23:26:19
【问题描述】：

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

当我为 rootRoute 声明一个 app.routes 并为 childRoute 声明一个 main.routes 时，基 html('/') 会以某种方式跳转到 childRoute 基（例如 /main）并显示错误的组件。
我已经将 base href="/" 添加到我的 index.html 并且路由器插座工作正常。
我很确定文件引用是正确的（两个路由文件导出同名“路由”）
当我输入“/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 模板示例？
我直接在浏览器中输入网址，没有触发
如果空路径路由没有子路由，则添加pathMatch，如{ path:'', component: AccountComponent, pathMatch: 'full'}, 同样使用forChild() 添加的路由不会自动成为子路由。这里已经有几个相关的问题了。
我将{ path:'', component: AccountComponent, pathMatch: 'full'}, 添加到我的“app.routes”中，并从我的main.routes 中删除main/。它仍然是错误的。 “有几个相关的问题”是什么意思？

标签： angular angular2-routing

【解决方案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”。
然后一切正常。

【讨论】：