내가 사용한 Angular 버전 -Angular 4.2.0

Angular 4는 런타임에 구성 요소 를로드하기 위해 ComponentFactoryResolver 와 함께 제공 됩니다. 이것은 Angular 1.0에서 $ compile 을 구현 한 것입니다.

이 아래 예제에서는 ImageWidget 구성 요소를 DashboardTileComponent에 동적으로 로드 합니다.

구성 요소를로드 하려면 동적 구성 요소를 배치하는 데 도움이되는 ng-template에 적용 할 수있는 지시문이 필요합니다.

WidgetHostDirective

 import { Directive, ViewContainerRef } from '@angular/core';

    @Directive({
      selector: '[widget-host]',
    })
    export class DashboardTileWidgetHostDirective {
      constructor(public viewContainerRef: ViewContainerRef) {


      }
    }

이 지시문은 ViewContainerRef 를 주입 하여 동적으로 추가 된 구성 요소를 호스팅 할 요소의 뷰 컨테이너에 액세스합니다.

DashboardTileComponent (동적 구성 요소를 렌더링하기위한 자리 표시 자 구성 요소)

이 구성 요소는 상위 구성 요소에서 오는 입력을 승인하거나 구현에 따라 서비스에서로드 할 수 있습니다. 이 구성 요소는 런타임시 구성 요소를 해결하기 위해 주요 역할을 수행합니다. 이 메소드에서는 궁극적으로 서비스에서 컴포넌트 이름을로드하고 ComponentFactoryResolver로 분석 하고 마지막으로 데이터를 동적 컴포넌트로 설정 하는 renderComponent () 메소드를 볼 수 있습니다 .

import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DashboardTileWidgetHostDirective } from './DashbardWidgetHost.Directive';
import { TileModel } from './Tile.Model';
import { WidgetComponentService } from "./WidgetComponent.Service";


@Component({
    selector: 'dashboard-tile',
    templateUrl: 'app/tile/DashboardTile.Template.html'
})

export class DashboardTileComponent implements OnInit {
    @Input() tile: any;
    @ViewChild(DashboardTileWidgetHostDirective) widgetHost: DashboardTileWidgetHostDirective;
    constructor(private _componentFactoryResolver: ComponentFactoryResolver,private widgetComponentService:WidgetComponentService) {

    }

    ngOnInit() {

    }
    ngAfterViewInit() {
        this.renderComponents();
    }
    renderComponents() {
        let component=this.widgetComponentService.getComponent(this.tile.componentName);
        let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
        let viewContainerRef = this.widgetHost.viewContainerRef;
        let componentRef = viewContainerRef.createComponent(componentFactory);
        (<TileModel>componentRef.instance).data = this.tile;

    }
}

DashboardTileComponent.html

 <div class="col-md-2 col-lg-2 col-sm-2 col-default-margin col-default">
                        <ng-template widget-host></ng-template>

          </div>

WidgetComponentService

동적으로 해결하려는 모든 구성 요소를 등록하는 서비스 팩토리입니다.

import { Injectable }           from '@angular/core';
import { ImageTextWidgetComponent } from "../templates/ImageTextWidget.Component";
@Injectable()
export class WidgetComponentService {
  getComponent(componentName:string) {
          if(componentName==="ImageTextWidgetComponent"){
              return ImageTextWidgetComponent
          }
  }
}

ImageTextWidgetComponent (런타임에로드하는 구성 요소)

import { Component, OnInit, Input } from '@angular/core';


@Component({
    selector: 'dashboard-imagetextwidget',
    templateUrl: 'app/templates/ImageTextWidget.html'
})

export class ImageTextWidgetComponent implements OnInit {
     @Input() data: any;
    constructor() { }

    ngOnInit() { }
}

마지막으로이 ImageTextWidgetComponent를 entryComponent로 앱 모듈에 추가하십시오.

@NgModule({
    imports: [BrowserModule],
    providers: [WidgetComponentService],
    declarations: [
        MainApplicationComponent,
        DashboardHostComponent,
        DashboardGroupComponent,
        DashboardTileComponent,
        DashboardTileWidgetHostDirective,
        ImageTextWidgetComponent
        ],
    exports: [],
    entryComponents: [ImageTextWidgetComponent],
    bootstrap: [MainApplicationComponent]
})
export class DashboardModule {
    constructor() {

    }
}

TileModel

 export interface TileModel {
      data: any;
    }

내 블로그의 원래 참조

공식 문서

샘플 소스 코드 다운로드

답변

<ng-template dynamic-template
             [template]="'some value:{{param1}}, and some component <lazy-component></lazy-component>'"
             [context]="{param1:'value1'}"
             [extraModules]="[someDynamicModule]"></ng-template>

<div>
  <div id="container"></div>
  <button (click)="viewMeteo()">Meteo</button>
  <button (click)="viewStats()">Stats</button>
</div>

import { Component, DynamicComponentLoader, ElementRef, Injector } from '@angular/core';
import { WidgetMeteoComponent } from './widget-meteo';
import { WidgetStatComponent } from './widget-stat';

@Component({
  moduleId: module.id,
  selector: 'widget-loader',
  templateUrl: 'widget-loader.html',
})
export class WidgetLoaderComponent  {

  constructor( elementRef: ElementRef,
               public dcl:DynamicComponentLoader,
               public injector: Injector) { }

  viewMeteo() {
    this.dcl.loadAsRoot(WidgetMeteoComponent, '#container', this.injector);
  }

  viewStats() {
    this.dcl.loadAsRoot(WidgetStatComponent, '#container', this.injector);
  }

}

npm install p3x-angular-compile

<div [p3x-compile]="data" [p3x-compile-context]="ctx">loading ...</div>