Question

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

当我为rootRoute声明一个app.routes和为childRoute声明一个main.routes时，基本的html（＆＃39; /＆＃39;）会跳转到childRoute base（例如/ main）并显示错误组件。
我已经将 base href =＆＃34; /＆＃34; 添加到我的index.html并且路由器插座正常工作。
我很确定文件引用是正确的（两个路由文件导出相同的名称＆＃34;路由＆＃34;）
当我输入＆＃34; / account＆＃34;页面加载正确，唯一的问题是＆＃39; /＆＃39;将加载为＆＃39; / main＆＃39;我不知道为什么。
其他路线运作良好，＆＃34; / account＆＃34;，＆＃34; / main＆＃34;，＆＃34; / main / hero＆＃34; ..等等

这是我的代码
的 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）显示正确的组件但是，＆＃39; / main / hero＆＃39;和＆＃39; / main / main / hero＆＃39;都工作！儿童路线似乎没有附加父路线任何人都可以重现这个问题吗？这里发生了什么？

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'} ];

主要的变化是我删除了＆＃34; RouterModule.forChild（MAIN_ROUTES）＆＃34;而我只是导入＆＃34; RouterModule＆＃34;在main.module.ts。
然后一切都运作良好。

Angular2路由到错误的页面

1 个答案: