时间戳

首页 > 解决方案 > 如何在特定条件下使用导入？

angular - 如何在特定条件下使用导入？

问题描述

我对角度和打字稿比较陌生。

我的想法是，将不同的主机名重定向到一个 angular6 项目，因为大部分内容是相同的，只是语言和 URL 不同。

例如我在app-routing.module.ts中所做的：

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

import {enRoutes} from "lang/en/routes";
import {esRoutes} from "lang/es/routes";
import {frRoutes} from "lang/fr/routes";

let routes: Routes;

switch(window.location.hostname) {
  case 'foobar.es' : {
    routes = esRoutes;
  }
  case 'foobar.fr' : {
    routes = frRoutes;
  }
  default : {
    routes = enRoutes;
  }
}

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

它就像一个魅力，但我现在面临的问题是每个主机名的路由都在main.js中。现在 Route-Files 真的很大，而且还有不止 3 个主机名，因此main.js变得非常大。

由于这些静态导入，它将加载所有路由，无论它被调用哪个主机名。我已经尝试使用 import(...).then(...) 进行延迟加载，但它没有用:(

有谁知道，如何解决这个问题？

标签： angulartypescript

解决方案

你正在做的事情的方法似乎非常错误。

只有语言和网址不同

这应该是一个使用 Angular 国际化提供正确语言的应用程序。Angular 在此处为不同语言提供国际化指南... https://angular.io/guide/i18n

对于不同的 URL，是什么阻止了您仅使用这样的简单查找：

[
  {
    "domain": "domainone.com",
    "url": "/url/one/"
  {,
  {
    "domain": "domaintwo.com",
    "url": "/url/two/"
  {
]

如果您真的需要追求延迟加载路线（这两种方式都不是一件坏事），那么延迟加载路线的 Angular 文档就在这里：

https://angular.io/guide/lazy-loading-ngmodules

推荐阅读