在angular2中覆盖子路由

时间:2017-03-18 17:15:55

标签: angular angular2-routing

在angular2子模块中,我定义了一些相当通用的路径:

MyChildModule:

const childRoutes: Routes = [
    { path: "daten/:entityname/add", component: DatenAddRowComponent },
    { path: "daten/:entityname/:id", component: DatenEditRowComponent },
    { path: "daten/:entityname", component: DatenRowsComponent },
    { path: "daten", component: DatenEntitiesComponent },
];

@NgModule({
    imports: [
        CommonModule,
        HttpModule,
        RouterModule.forChild(childRoutes)
    ],
    // ...
})

在我的AppModule本身中,我想覆盖其中一些路径:

const appRoutes: Routes = [
    { path: "daten/User/add", component: UserAddComponent },
    // ...
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes),
        MyChildModule
    // ...

问题是:当我访问/daten/User/add时,它将使用子路由daten/:entityname/add而不是主应用路由。子路线优先。永远不会调用UserAddComponent

如何覆盖主AppModule中的子路由?

1 个答案:

答案 0 :(得分:0)

您应该按以下方式更改订单

const childRoutes: Routes = [
    { path: "daten", component: DatenEntitiesComponent ,'pathMatch' :'full' },
    { path: "daten/:entityname/add", component: DatenAddRowComponent },
    { path: "daten/:entityname/:id", component: DatenEditRowComponent },
    { path: "daten/:entityname", component: DatenRowsComponent },

];

并在您的主应用中

 { path: "daten/User/add", component: UserAddComponentm 'pathMatch' :'full' },