Angular 2 中动态改变导入组件的路径

Question

我想根据构建的环境动态改变导入组件的路径。

就像我使用以下命令构建应用程序时一样：

ng build --environment client1-testing --output-path ../dist/my-app

然后在 app.module.ts 我正在导入这样的组件：

import { ClientComponent } from './components/client1/client1.component';

我想让 ClientComponent 路径动态化，就像我正在为 client1 构建应用程序一样，那么路径应该是

'./components/client1/client.component';

如果我正在为 client2 构建应用程序，那么路径应该是

'./components/client2/client.component';

我是 Angular 的新手，所以不知道如何实现它。我们为每个客户端都有单独的文件夹，并且希望从这些文件夹中动态导入组件。

Answer 1

我认为您应该考虑将动态组件视为因为 AFAIK，您无法根据 Angular 中的 env 变量更改组件路径。

您可以做的是设置一个环境，该环境将使特定变量为真，然后在创建动态组件时使用它。

export const environment = {
  production: false,
  client1: true,
  client2:true
};

动态组件

从这里开始，您必须使用 Builder 组件中的数据为客户端创建特定组件。

More on How to create Dynamic Component

链接中的小片段

//pass data to this component like from any other component
<dynamic [componentData] = "componentData"></dynamic>

// Dynamic Logic 
import { Component, OnInit, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver, ReflectiveInjector } from '@angular/core';
import { AngularService } from "app/shared/angular.service";

import { HelloWorldComponent } from 'app/dynamic-component/dynamic/hello-world-component';
import { WorldHelloComponent } from './world-hello-component';

@Component({
  selector: 'dynamic',
  entryComponents: [HelloWorldComponent, WorldHelloComponent],
  template: `<div #dynamicContainer></div>`
})
export class DynamicComponent implements OnInit{

  currentComponent = null;

  @ViewChild('dynamicContainer' , {read : ViewContainerRef}) decorator : ViewContainerRef;  // this is the container where we
  // we will load our dynamic component in short Represents a container where one or more Views can be attached.
  @Input() set componentData (data : {component: any , inputs :any}){ // getting the input from the called component which instantiates this component
    if (!data){
      return;
    }
    // Inputs need to be in the following format to be resolved properly
    let inputProviders = Object.keys(data.inputs).map((inputName) => {return {provide: inputName, useValue: data.inputs[inputName]};});
    let resolvedInputs = ReflectiveInjector.resolve(inputProviders);

    // We create an injector out of the data we want to pass down and this components injector
    let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.decorator.parentInjector);

    // We create a factory out of the component we want to create
    let factory = this.resolver.resolveComponentFactory(data.component);

    // We create the component using the factory and the injector
    let component = factory.create(injector);
    //console.log(component.hostView);
    // We insert the component into the dom container
    this.decorator.insert(component.hostView);
    // We can destroy the old component is we like by calling destroy
    // keep this if you want only one instacne of the component as in this example else remove it and play around
    if (this.currentComponent) {
      this.currentComponent.destroy();
    }

    this.currentComponent = component;
    this.currentComponent.instance.ref = component; // this method passes the ref of the component to the dynamic component which helps 
    //us to destroy the component at will

  }


  constructor(private resolver : ComponentFactoryResolver) {}

  ngOnInit() {

  }