私が使用した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;
}
私のブログからの元の参照
公式ドキュメント
サンプルソースコードをダウンロード