在 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 {}