如何在父模块而不是App模块中显示子模块的路由器出口?

时间:2019-05-17 07:49:38

标签: javascript angular

我有带有路由模块的根模块“ app”。 在里面,我还有另一个带有路由模块的模块“用户”。 (应用/用户)。 用户模块具有另一个带有路由模块的模块“配置文件”。 (应用/用户/个人资料)

配置文件模块已导入用户模块。 用户模块已导入到应用程序模块中。

当我点击此URL“ / user”时,用户模块的导航将加载到应用程序模块的路由器出口中。 当我点击该URL“ / user / profile”时,我想在User模块的路由器出口内显示Profile模块的导航。而是在应用程序路由模块中显示。如何配置为在不带loadChildren的用户模块中显示导航?

const routes: Routes = [{
    path: 'user/profile',
    component: IndexComponent,
    children: [{
            path: 'create',
            component: CreateComponent,
        },
        {
            path: 'view',
            component: ViewComponent,
        }
    ]
}, ];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ProfileRoutingModule {}

const routes: Routes = [{
    path: 'user',
    component: IndexComponent,
    children: [{
            path: 'create',
            component: CreateComponent,
        },
        {
            path: 'view',
            component: ViewComponent,
        }
    ]
}, ];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class UserRoutingModule {}

@NgModule({
    declarations: [IndexComponent, CreateComponent, ViewComponent],
    imports: [
        CommonModule,
        ProfileModule,
        UserRoutingModule,
    ]
})
export class UserModule {}

const appRoutes: Routes = [{
    path: 'blog-index',
    component: BlogIndexComponent,
}];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
        )
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {}

@NgModule({
    declarations: [
        AppComponent,
        BlogIndexComponent
    ],
    imports: [
        BrowserModule,
        UserModule,
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

0 个答案:

没有答案