基于全局变量的动态路由答案

【问题标题】：Dynamic routing based on global variable基于全局变量的动态路由
【发布时间】：2019-02-27 04:42:32
【问题描述】：

我在一个角度工作区中有两个不同的项目。我想根据 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 这样的单独路径。

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

【问题讨论】：

您的 window.id 是否发生了变化？控制台，看看！还分别对 project1 和 project2 进行硬编码，并检查路由是否对它们都有效。
window.id 不会改变。你如何指代硬编码
通过硬编码我的意思是，const routes: Routes = [selectedProject]; 尝试const routes: Routes = [project1]; 和类似的项目2，以确保它们是否正确加载。此外，如果您使用的是 javascript window 对象，它没有 id 属性，因此它应该评估为 undefined 因此条件为 false 并路由到 project2。

标签： angular angular6 angular-routing

【解决方案1】：

唯一的方法是创建分隔路由数组并根据项目加载它们，但这样做的缺点是你应该在每次 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)
            }
        }
    }

【讨论】：

它不工作，像 core.js:1673 错误错误错误：未捕获（承诺）：错误：找不到模块“./module/module1.module.ngfactory”。错误：找不到模块“./module/module1.module..ngfactory”。

【解决方案2】：

您无法使用全局变量更改路线，原因有很多。

路由使用浏览器的 URL。
变量作用域，全局变量不寻找变化。
您在加载时分配“selectedProject”，这是在 laod 上评估并定义您的路线对象。

为了使用路由在模块之间进行选择，请使用参数键，或分配路由：

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

const project 2 = {
 path: '*',
 loadchildren: '../module2#module2'
};

当然，你必须使用route & navigation

【讨论】：