インポートされたコンポーネントのパスを角度2で動的に変更します。

Question

ビルドされた環境に応じて、インポートされたコンポーネントのパスを動的に変更したいと考えています。私は、コマンドの下で私のアプリを構築していたときと同様に

：

app.module.ts私はこのような部品を輸入していますでその後

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

：

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

私はClientComponentを作りたいですクライアント1のアプリを作成している場合のようなパス動的です。

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

クライアント2の場合はパスは

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

私はAngularを初めて使うので、実装方法はわかりません。私たちは、すべてのクライアントに別々のフォルダを持ち、これらのフォルダからコンポーネントを動的にインポートしたいと考えています。

Answer 1

AFAIKのために、Angularのenv変数に基づいてコンポーネントパスを変更することはできないため、Dynamic Componentsを検討するべきだと思います。

あなたができることは、特定の変数を真にして、そのような動的コンポーネントを作成する際に使用する環境を設定することです。

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

動的コンポーネント

ここにからあなたがクライアントのために特定のコンポーネントを作成するためにあなたのBuilderコンポーネント内のデータを使用する必要が主旨です。リンク

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

    } 

から

More on How to create Dynamic Component

小さなスニペット