在 app.routing.module.ts 的 ngModule 中动态分配路由

Question

我有几条路线需要根据服务文件中的标志删除。 我无法动态设置路线......这是我到目前为止所尝试过的。

我的 app.routing.module.ts

const productionRoutes = [
    {
        path: 'a',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.A),
        canLoad: [LoginGuard]
    }
] as Routes;

const developmentRoutes = [
    {
        path: 'a',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.A),
        canLoad: [LoginGuard]
    },
    {
        path: 'b',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.B),
        canLoad: [LoginGuard]
    },
    {
        path: 'c',
        loadChildren: () =>
            import('module').then(
                (r) => r.C
            )
    }
] as Routes;

export const routes = AppRoutingModule['getRoutes'] // **((("CHANGE HERE")))**;

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            paramsInheritanceStrategy: 'always'
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
    constructor(private featureToggleService: FeatureToggleService) {}

    getRoutes(): Routes {
        return this.featureToggleService.productionRoutes()
            ? productionRoutes
            : developmentRoutes;
    }
}

如上所示，根据 productionRoutes() 返回的 boolean，我想动态加载路由。 非常感谢这里的任何帮助......

Answer 1

找到了，我们需要使用 resetConfig() 重新分配 app.component.ts 中的路由

import { developmentRoutes, productionRoutes } from './app.routing.module';

constructor(
    private router: Router
) {}

ngOnInit(): void {
        this.hideRoutes =
            this.featureToggleService.productionRoutes();
        this.router.resetConfig(
            this.hideRoutes ? productionRoutes : developmentRoutes
        );
    }

应用程序路由模块.ts

export const productionRoutes = [
    {
        path: 'a',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.A),
        canLoad: [LoginGuard]
    }
] as Routes;

export const developmentRoutes = [
    {
        path: 'a',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.A),
        canLoad: [LoginGuard]
    },
    {
        path: 'b',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.B),
        canLoad: [LoginGuard]
    },
    {
        path: 'c',
        loadChildren: () =>
            import(
                'module'
            ).then((r) => r.C),
        canLoad: [LoginGuard]
    }
] as Routes;

export const routes = productionRoutes;

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            paramsInheritanceStrategy: 'always'
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}