javascript - Angular 6:如何使用具有相同路线的多个 loadChildren?
问题描述
我有类似的东西:
const routes: Routes = [
{
path: ':path', component: SiteRoot, children: [
{ path: '', loadChildren: '../modules/maple/template.module#TemplateModule' }
]
}
];
我希望使用这个 :path url 来动态匹配多个模块。每个模块都有自己的内部路由。
有什么办法可以做到这一点?
我用 ResolveComponentFactory 尝试了 ViewContainerRef,但它不适用于仅模块组件。带有 NgModuleFactoryLoader 的事件,无法应用路由。
编辑,让一切都清楚:
我想要实现的是在同一路径路径上显示不同的模块。例如,用户可以在“home”路径看到用户仪表板,管理员也可以在“home”路径看到管理仪表板。
此功能由业务逻辑定义,因此我无法将管理仪表板更改为另一个 url
解决方案
我认为您正在尝试错误地创建路由模块。无论如何,你应该写下你为什么需要这个。我会试着回答。每个模块都应该有自己的路径,因此路由模块应该是严格和静态的。如果您出于安全考虑,请使用警卫并从菜单组件中隐藏项目。
如果您需要这样的 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>
推荐阅读
- git - 添加特定文件而不输入整个路径?
- node.js - 如何将 HTML 中的按钮链接到 node.js 文件
- angular - ngx-datatable ERESOLVE 无法解析依赖树
- sql-server - 如何检查 Blazor Server 应用程序的数据库中是否存在用户输入?
- python - 如何为 Odoo 智能按钮设置顺序?
- python - 在 Python 中从 PDF 文件中提取文本并保留原始布局
- unity3d - URP 光照着色器打破了静态批处理
- python - Pymodbus 服务器写回调
- sql - 删除 postgresql 表中的所有约束 - 删除级联
- axios - 如何将 axios 设置为 Nuxt.js 的默认原型并将令牌附加到默认的 axios 授权标头?