在 Angular 的同一路径上有条件地加载不同的模块 [英] Conditionally Load Different Modules on the Same Path in Angular
问题描述
我有一个多用户 Angular 应用程序,每个用户都有一个模块(因为他们有完全不同的可访问页面),如下所示:
I have a multiple user Angular app, with a module for each user (because they have totally different accessible pages), like this:
- app.module.ts
- app-routing.module.ts
- 登录/
- login.component.ts
- 页数/
- 用户管理/
- 配置/
- 页数/
- 任务管理/
- 配置/
- 页面/
- guest.module.ts
- guest-routing.module.ts
从登录页面(
/login
from app-routing),我想根据用户提供的凭据重定向到每个模块,但NOT与子路由像/user
/admin
或/guest
From the login page (
/login
from app-routing), I want to redirect to each module based on the credentials the user provided, but NOT with children routes like/user
/admin
or/guest
相反,当管理员登录时,我希望重置 URL.因此,例如,管理员不应看到路径
/admin/user-management
或/admin/configuration
;它只是访问/user-management
或/configuration
Instead, when an admin logs in, I want the URL to be reset. So, for example, the admin should not see the paths
/admin/user-management
or/admin/configuration
; it just accesses/user-management
or/configuration
这可能吗?如果我有
admin
和user
的/configuration
路由会不会有问题?Is this possible? Will it be a problem if I have a
/configuration
route for bothadmin
anduser
?这是一个 Stackblitz 工作示例.登录后查看 URL 路由.
Here's a Stackblitz working example. Take a look at the URL routes when logged in.
EDIT 2:在 Stackblitz 示例中,您可以看到
master
上的原始问题和solution
分支上的工作解决方案.>EDIT 2: In the Stackblitz example, you can see the original problem on
master
and the working solution onsolution
branches.推荐答案
解决方案:
经过大量调查,我发现可以通过创建路由
matcher
来完成.After a lot of investigation, I found out that it can be done with creating a route
matcher
.代码:
我设法让它与你的代码一起工作.这是工作示例:https://stackblitz.com/edit/angular2-routing-test-qj4geu?file=src/app/user/user.component.html
I managed to make it work with your code. Here is the working example: https://stackblitz.com/edit/angular2-routing-test-qj4geu?file=src/app/user/user.component.html
这是
app-routing.module.ts
上的相关代码:const routes: Routes = [ { path: 'login', component: LoginComponent }, { matcher: url => { const user_type = localStorage.getItem('user_type'); if (user_type === 'user') { return url.length ? { consumed: [] } : { consumed: url }; } return null; }, loadChildren: () => import('./user/user.module').then(m => m.UserModule) }, { matcher: url => { const user_type = localStorage.getItem('user_type'); if (user_type === 'admin') { return url.length ? { consumed: [] } : { consumed: url }; } return null; }, loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }, { matcher: url => { const user_type = localStorage.getItem('user_type'); if (user_type === 'guest') { return url.length ? { consumed: [] } : { consumed: url }; } return null; }, loadChildren: () => import('./guest/guest.module').then(m => m.GuestModule) }, { path: '', pathMatch: 'full', redirectTo: 'login' } ];
注意:
如此处所述:https://github.com/angular/angular/issues/23866#issuecomment-388527483,当我们使用路由
matcher
时,我们需要指定url
的哪一部分被matcher
函数,其余部分将发送到嵌套路由器.As stated here: https://github.com/angular/angular/issues/23866#issuecomment-388527483, when we use route
matcher
we need to specify which portion of theurl
was consumed by thematcher
function, and the remaining portion will be send to the nested router.博客:
以下是两篇博文,其中包含深入的详细信息和操作方法:
Here are two blog posts that has in-depth details and walk-through how to do it:
博客 1:https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483
这篇关于在 Angular 的同一路径上有条件地加载不同的模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!