我的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
当我为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' 都可以使用!
看起来子路径没有附加父路径。
有人能否重现问题?这里发生了什么?
pathMatch
,如{ path:'', component: AccountComponent, pathMatch: 'full'},
。同时使用forChild()
添加的路由也不会自动成为子路由。这里已经有几个相关的问题了。 - Günter Zöchbauer{ path:'', component: AccountComponent, pathMatch: 'full'}
,并从我的main.routes中删除了main/
。但仍然不正确。你说的“有几个相关的问题”是什么意思? - 鄭元傑