Angular2のコンポーネントでダイナミックテンプレートをレンダリングする方法

Question

Load existing components dynamically Angular 2 Final Releaseのような多くのstackoverflowオプションを試しました。

私がしたいことは、ajaxリクエストを持つhtmlページを取得し、カスタムコンポーネントでこのテンプレートをレンダリング/コンパイルすることです。

私は、angular2に2つの非推奨コンポーネントがあり、使用する必要があることを理解しましたComponentFactoryResolver。

私の古いソリューションでは、HTMLをレンダリングするために '[innerHtml]'を設定することができます。 今、私は新しい解決策が必要です。

誰が私を助けることができますか？

page.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactory, OnInit, ComponentFactoryResolver } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 


@Component({ 
    selector: "wd-page", 
    templateUrl: "/app/page/page.component.html", 
    providers: [] 
}) 
export class PageComponent implements OnInit { 

    // we need the viewcontainer ref, so explicitly define that, or we'll get back 
    // an element ref. 
    @ViewChild('dynamicChild', { read: ViewContainerRef }) 
    private target: ViewContainerRef; 

    private page = { 
     Source: "<div><h2>Hello world</h2><one-of-my-components></one-of-my-components></div>" 
    } 


    constructor(
     private vcRef: ViewContainerRef, 
     private resolver: ComponentFactoryResolver) { } 


     ngOnInit() { 
      //What code do i need here? 
     } 
} 

<div #dynamicChild></div> 

<!-- Old implementation! 

    <div *ngIf="!showSource" [innerHTML]="page"> 
    </div> 
--> 

Answer 1

問題はYurzuiにおかげで、

https://plnkr.co/edit/TAbupH4si62x10QZ7xuc?p=preview

異なるポスト（Angular 2.1.0 create child component on the fly, dynamically）から、一般的なHTMLのoutleteを解決することができますカスタムディレクティブでテンプレートをレンダリングするために使用するそれらにctives。

モジュールをレンダリングするすべてのカスタムコンポーネントとともにインポートすることを忘れないでください！

export function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any>> { 
const cmpClass = class DynamicComponent {}; 
const decoratedCmp = Component(metadata)(cmpClass); 

// Import the module with required components here 
@NgModule({ imports: [CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] }) 
class DynamicHtmlModule { } 

return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) 
    .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => { 
    return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp); 
    }); 
} 

Answer 2

私は@Yurzuiと@Linksonderのソリューションで（例えばHomeComponentなど）私自身のコンポーネントを使用するための小さな変更を加えました。 https://plnkr.co/edit/27x0eg?p=preview

基本的には、createComponentFactory（）内で追加のインポートとしてAppModuleをDynamicHtmlModuleに追加しています。

@NgModule({ imports: [AppModule, CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] }) 
class DynamicHtmlModule { } 

そしてAppModule

`[innerHTMLプロパティ]`コンポーネントを作成したことはありません

@NgModule({ 
    ... 
    exports: [HomeComponent, AboutComponent], 
    ... 
}) 
export class AppModule { }