実行時に角をつけてコンパイルしてコンポーネントを作成する

Question

私はドキュメント生成ツールを角度をつけて作ろうとしていますが、ユーザーが動的にコンテンツを作成できるようにする方法を挑戦しています。

私が作成したいコンポーネントは、任意のモデルと動作を持つことができるので、共有コンポーネントを使用することはできません。

私が記述しているコンポーネントは、コンパイル時には存在しません。

私は一部documentation for rendering dynamic componentsを参照してください。しかし、の「動的」コンポーネントをngModuleに記載する必要があることに言及しています。どの私のシナリオではが動作しません。

この効果を得る別のメカニズムはありますか？

Answer 1

モジュールとコンポーネントをオンザフライで作成し、デコレータを適用してからコンパイルすることができます。あなたは、実行時にコンパイラを持参する必要が動作するように、このアプローチのために

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef; 

constructor(private _compiler: Compiler, 
      private _injector: Injector, 
      private _m: NgModuleRef<any>) { 
} 

ngAfterViewInit() { 
    const template = '<span>generated on the fly: {{name}}</span>'; 

    const tmpCmp = Component({template: template})(class { 
    }); 
    const tmpModule = NgModule({declarations: [tmpCmp]})(class { 
    }); 

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule) 
    .then((factories) => { 
     const f = factories.componentFactories[0]; 
     const cmpRef = f.create(this._injector, [], null, this._m); 
     cmpRef.instance.name = 'dynamic'; 
     this.vc.insert(cmpRef.hostView); 
    }) 
} 

：その後、コンパイル済みのコンポーネントにアクセスすることができるようになります。

• Here is what you need to know about dynamic components in Angular

：動的コンポーネントの詳細については記事を読みます