내가 사용한 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;
}
내 블로그의 원래 참조
공식 문서
샘플 소스 코드 다운로드