가져온 구성 요소의 경로를 각도 2로 동적으로 변경합니다.

Question

내장 환경에 따라 가져온 구성 요소의 경로를 동적으로 변경하고 싶습니다. 내가 명령을 아래로 내 응용 프로그램을 구축하고 때처럼

:

app.module.ts 나는이 같은 구성 요소를 수입하고있는 그런

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

:

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

내가 ClientComponent을 만들고 싶어 경로가 동적 인 것처럼 client1에 대한 앱을 구축하는 경우 경로는

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

클라이언트 2의 pp이면 경로는

이어야합니다.

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

저는 Angular를 처음 사용하기 때문에 구현 방법을 모르겠습니다. 우리는 모든 클라이언트에 대해 별도의 폴더를 가지고 있으며 이러한 폴더에서 동적으로 구성 요소를 가져 오려고합니다.

Answer 1

AFAIK 때문에 Angular의 env 변수를 기반으로 구성 요소 경로를 변경할 수 없으므로 동적 구성 요소를 고려해야한다고 생각합니다.

당신이 할 수있는 일은 특정 변수를 참으로 만든 환경을 설정 한 다음 이와 같은 동적 구성 요소를 만드는 데 사용하는 것입니다.

export const environment = { 
    production: false, 
    client1: true, 
    client2: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() { 

    } 

에서

More on How to create Dynamic Component

작은 발췌문