Angular 2（Typescript） - コンポーネントのリモート開発と動的注入

Question

私は、構成可能な管理コンソールのコア技術としてAngular 2を評価しています。その主な要件は、拡張可能でカスタマイズ可能です。外部の開発者が独自のコンポーネントを開発し、それを私の "読み取り専用"フレームワークの中に何らかの方法で注入することは可能であるべきです。読み取り専用とは、開発者がフレームワークのソースコードにアクセス（または編集）できないことを意味します。代わりに、 "マスター"アプリの構造を知らずに、サーブレット（または他のもの）を通して静的に提供することなく、コンポーネントのリソース（.html、.ts/.jsファイル）の開発に集中することができます。これは少なくとも理論的に可能ですか？タイプスクリプトベースのコンポーネントを宣言して理解している（あらかじめ定義された場所から）動的にインポートする "メイン"アプリケーションモジュールを使用できますか？

Answer 1

うん - ここを参照してください：https://plnkr.co/edit/fdP9Oc?p=info

をPlunkrホームページを見ながら、私はランダムに、この例に出くわし。

コンポーネントをオブジェクトパラメータとしてコンパイルする関数に渡すことができます。

import {Compiler, Component, NgModule, OnInit, ViewChild, 
    ViewContainerRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Dynamic template:</h1> 
      <div #container></div>` 
}) 
export class App implements OnInit { 
    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef; 

    constructor(private compiler: Compiler) {} 

    ngOnInit() { 
    this.addComponent(
     `<h4 (click)="increaseCounter()"> 
     Click to increase: {{counter}} 
     </h4>`, 
     { 
     counter: 1, 
     increaseCounter: function() { 
      this.counter++; 
     } 
     } 
    ); 
    } 

    private addComponent(template: string, properties?: any = {}) { 
    @Component({template}) 
    class TemplateComponent {} 

    @NgModule({declarations: [TemplateComponent]}) 
    class TemplateModule {} 

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule); 
    const factory = mod.componentFactories.find((comp) => 
     comp.componentType === TemplateComponent 
    ); 
    const component = this.container.createComponent(factory); 
    Object.assign(component.instance, properties); 
    // If properties are changed at a later stage, the change detection 
    // may need to be triggered manually: 
    // component.changeDetectorRef.detectChanges(); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}