在Angular 11中动态添加子路由到延迟加载模块

Question

我正在为我的雇主开发一种模块化的框架。这样我们的客户就可以说出他们想要的功能。所以我在库中拆分了所有内容，并为每个库添加了一个路由模块。其中一个库是Navigation。它包含一个带有侧栏和工具栏的组件，以及用于其子级的<router-outlet></router-outlet>。

所以目前我的AppRoutingModule是这样的：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, NavigationComponent } from '@company/navigation';
const routes: Routes = [
{
path: '',
component: NavigationComponent,
canActivate: [AuthGuard],
data: {
breadcrumb: null,
},
children: [
{
path: 'profile',
loadChildren: () => import('@company/profile').then((m) => m.ProfileModule),
},
{
path: 'order',
loadChildren: () => import('@company/endeavour').then((m) => m.OrderModule),
},
{
path: 'user-administration',
loadChildren: () => import('@company/user-administration').then((m) => m.UserAdministrationModule),
},
{
path: 'dashboard',
loadChildren: () => import('@company/dashboard').then((m) => m.DashboardModule),
},
],
},
{
path: 'auth',
loadChildren: () => import('@company/auth').then((m) => m.AuthModule),
},
{ path: '**', redirectTo: '' },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })],
exports: [RouterModule],
})
export class AppRoutingModule {}

因此，基本上，我将空路由设置为具有AuthGuard的NavigationComponent，并将其子级设置为来自其他库的延迟加载模块。

我现在的想法是，我还将NavigationRoutingModule添加到我的导航库中

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '@company/shared';
import { NavigationComponent } from '../components/navigation/navigation.component';
const routes: Routes = [
{
path: '',
component: NavigationComponent,
canActivate: [AuthGuard],
data: {
breadcrumb: null,
},
children: [],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class NavigationRoutingModule {}

并将AppRoutingModule简化为这样的东西：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('@company/navigation').then((m) => m.NavigationModule),
},
{
path: 'auth',
loadChildren: () => import('@company/auth').then((m) => m.AuthModule),
},
{ path: '**', redirectTo: '' },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })],
exports: [RouterModule],
})
export class AppRoutingModule {}

然后，通过某种魔法，我最终在AppModule中导入了一个NavigationModule，并将一些配置传递给NavigationModule的forRoot()方法，这样我就可以为这些项目设置路线。

所以我的基本想法是，我有一个带有动态子路线的导航模块，通过一些机制进行配置。我的意思是，很明显，我不能只静态地提供NavigationRoutingModule中的所有子路由。这将违背模块化的目的。

这样的事情可能发生吗？还是我想得太多了，而我目前的解决方案已经很好了？

Answer 1

如果我正确理解您的需求，您可以使用ROUTES InjectionToken，而不是直接在RouterModule的forRoot/forChild函数中传递路由，只需传递一个空数组，然后在providers部分提供ROUTES令牌。在这种情况下，Angular路由器将自动使用所提供令牌中的路由。

例如，

@NgModule({
imports: [
...
RouterModule.forChild([])
],
exports: [RouterModule],
providers: [
{
provide: ROUTES,
useFactory: (appSettings: AppSettings) => {
const defaultTab: string = appSettings.APP_VERSION === APP_VERSIONS.NL ? 'tab1' : 'tab2';
const routes: Routes = [
{
path: '',
component: TabsPage,
children: [
...
]
},
{
path: '',
redirectTo: defaultTab,
pathMatch: 'full'
}
];
return routes;
},
deps: [
APP_SETTINGS
],
multi: true
}
]
})
export class TabsPageRoutingModule {}