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构建app，那么路径应为

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

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

Answer 1

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

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

//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() {

  }

动态组件

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

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

1 个答案: