时间戳

首页 > 解决方案 > 基于全局变量的动态路由

angular - 基于全局变量的动态路由

问题描述

我在一个角度工作区中有两个不同的项目。我想根据 app.routing.ts 中的全局变量动态更改路由

这是我的应用程序路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const project1 = {
 path: '',
 loadchildren: '../module1#module1'
};

const project 2 = {
 path: '',
 loadchildren: '../module2#module2'
};
const selectedProject = window.id === 1 ? project1 : project2;

const routes: Routes = [selectedProject];

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

它总是与第二个项目一起使用。

注意：我想用空路径加载它，而不是像 project1、project2 这样的单独路径。

也尝试使用绝对路径和相对路径，但它不起作用

标签： angularangular6angular-routing

解决方案

唯一的方法是创建分隔路由数组并根据项目加载它们，但这样做的缺点是您应该在每次 window.id 更改时重新加载。

延迟加载模块应angular.json使用绝对路径导入。前任：

 "lazyModules": [
     "projects/website/src/app/pages/module1",
      "projects/website/src/app/pages/module2"
 ]

在你的路由器配置过程中，应该粘贴绝对路径而不是相对路径：

    export const PROJECT1_ROUTES = [{
       path: '/1',
       loadchildren: 'projects/website/src/app/pages/module1#Module1'
    }]

    export const PROJECT2_ROUTES = [{
       path: '*',
       loadchildren: 'projects/website/src/app/pages/module2#Module2'
    }]

    var routes = [];
    @NgModule({
       imports: [RouterModule.forRoot(routes)],
       exports: [RouterModule]
    })

    export class AppRoutingModule {
        constructor(
            private router: Router
        ) {
            const selectedProject = window.id === 1 ? true : false;
            if(selectedProject) {
                this.router.resetConfig(PROJECT1_ROUTES)
            } else {
                this.router.resetConfig(PROJECT2_ROUTES)
            }
        }
    }

推荐阅读