gpt4 book ai didi

javascript - Angular 6 : How to use multiple loadChildren with same route?

转载 作者:行者123 更新时间:2023-11-30 14:24:33 27 4
gpt4 key购买 nike

我有这样的东西:

const routes: Routes = [
{
path: ':path', component: SiteRoot, children: [
{ path: '', loadChildren: '../modules/maple/template.module#TemplateModule' }
]
}
];

我希望使用这个 :path url 来动态匹配多个模块。每个模块都有自己的内部路由。

有什么办法可以实现吗?

我尝试将 ViewContainerRef 与 ResolveComponentFactory 结合使用,但它不适用于仅模块组件。带有 NgModuleFactoryLoader 的事件,无法应用路由。

编辑,让一切都清楚:

我想要实现的是在同一路由路径上显示不同的模块。例如,用户可以在“home”路径看到用户仪表板,管理员也可以在“home”路径看到管理仪表板。

此功能由业务逻辑定义,因此,我无法将管理仪表板更改为另一个 url

最佳答案

我认为您试图错误地创建路由模块。不管怎样,你应该写下你为什么需要这个。我会尽力回答。每个模块都应该有自己的路径,所以路由模块应该是严格的和静态的。如果您出于安全考虑尝试使用它,请使用 guard 并从菜单组件中隐藏项目。

如果您需要这样的 URL:“/username1/profile”、“/username2/profile”,您可以简单地使用像您这样的代码,或者使用延迟加载。为父模块创建路由文件:

{ path: ':username', loadChildren: '../users/user.module#UserModule' }

为子模块创建路由文件:

{ path: '', loadChildren: 'UserComponent', children: [
{ path: '', redirectTo: 'profile' },
{ path: 'profile', component: ProfileComponent}
]
}

根据您的案例更新:

根据您的情况,您可以更改您的 HTML 文件。例如在 app.component.html 中,如果您的代码是:

 <div>
<router-outlet></router-outlet>
</div>

你可以改变它:

 <div *ngIf="isLoggedIn | async">
<admin-panel></admin-panel>
</div>
<div *ngIf="(!isLoggedIn | async)">
<router-outlet></router-outlet>
</div>

关于javascript - Angular 6 : How to use multiple loadChildren with same route?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52160926/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com