时间戳

首页 > 解决方案 > 在运行时针对不同国家/地区对 Angular 应用程序进行区域化

javascript - 在运行时针对不同国家/地区对 Angular 应用程序进行区域化

问题描述

我们制作了一个全球应用程序，我们希望将其区域化到不同的国家。某些国家/地区具有与角度全球组件中定义的类似功能。但是有些国家需要对特定组件进行全新的功能更改，我们必须使用相同的代码库。

我们如何在登录到应用程序后根据国家/地区加载这些组件，方法是将该组件维护在两个以国家代码命名的单独文件夹中？我们必须为此使用requireJS吗？

标签： javascriptangularinternationalizationrequirejs

解决方案

您可以通过使用Dynamic component loader. 参考

一个示例 implementationatino 可以如下：

import { Injectable,ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DynamicComponentLoadingService{


  constructor(private cfr: ComponentFactoryResolver) {}

  async loadComponent(vcr: ViewContainerRef, country: string) {
    // component-1
    const { Component1 } = await import('./compoennt1/component1.component');

    const { Component2 } = await import('./component2/component2.component');

    vcr.clear();
    // for instance we want to load component-1 for US
    let component : any = country === 'US' ? Component1: Component2;
   
    return vcr.createComponent(
      this.cfr.resolveComponentFactory(component))    
  }
}

这是解释相同内容的详细帖子。

推荐阅读