既存のコンポーネントを動的にロードAngular 2最終リリース )のような多くの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>
-->
問題solvedYurzuiのおかげで、
https://plnkr.co/edit/TAbupH4si62x10QZ7xuc?p=preview
別の投稿からの汎用HTMLアウトレット( Angular 2.1.0動的に子コンポーネントを作成 )を使用して、カスタムディレクティブを含むテンプレートをレンダリングできます。
レンダリングするすべてのカスタムコンポーネントを含むmoduleをインポートすることを忘れないでください!
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);
});
}
@ -Yurzuiおよび@Linksonderのソリューションで自分のコンポーネントを使用するための小さな変更(HomeComponentなど)を作成しました。 https://plnkr.co/edit/27x0eg?p=preview
基本的に、createComponentFactory()内の追加インポートとしてAppModuleをDynamicHtmlModuleに追加します。
@NgModule({ imports: [AppModule, CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] })
class DynamicHtmlModule { }
AppModuleで独自のコンポーネントをエクスポートします
@NgModule({
...
exports: [HomeComponent, AboutComponent],
...
})
export class AppModule { }