サービスを使用してNgModule entryComponentsを動的にロード

Question

こんにちは、私はangular2とtypescriptを初めて使っています。 コンポーネントを動的にロードしています。モジュールの宣言とentryComponentsでサービスを使用してコンポーネントを宣言する方法があるのだろうかと思いました。 typescriptですを使用して

、私は次の操作を行って、それを達成することができています：

import { ComponentLoaderService } from './../../services/component-loader.service'; 
 

 
let componentsToLoad = ComponentLoaderService.getComponents(); 
 

 
@NgModule({ 
 
    declarations: [ componentsToLoad ], 
 
    entryComponents: [ componentsToLoad ], 
 
}) 
 
export class testModule {}

これは実際に動作しますが、私はコンパイルして、サーバーが最初に実行されている場合のみ。

、私はそれを再コンパイルして実行しようとすると、私はこの一定のエラーを取得：。。

「エラーは、関数呼び出しがサポートされていない静的シンボル値を解決遭遇は、エクスポートを参照して、関数またはラムダの交換を検討します関数 "、"

私の他の考えは、 "export class testModule {}"部分にコンポーネントをロードして配列を埋める方法と、それをNgModuleに渡すことでしたか？

私の現在のテストからはうまくいきませんでしたが、私はまだこれに新しいので、何か不足している可能性があります。

誰かが助けてくれることを願っています。 ありがとう！ここで

は、コンパイルエラーを作成するコードです：

私はちょうど新しいテストアプリをngのでした。

次に、test-appフォルダにnpmをインストールしました。

私は/src/app/services/components-loader.service.tsを作成しました。

import { Injectable } from '@angular/core'; 
import { ViewContainerRef, ViewChild, ComponentFactoryResolver } from '@angular/core'; 

@Injectable() 
export class ComponentLoaderService { 
    constructor(private componentFactoryResolver: ComponentFactoryResolver){} 

    static getComponents(components: any[]): any[] { 
     var tmp = Array(); 

     for (var i = 0; i < components.length; ++i){ 
      if (components[i].key == 0){ 
       tmp.push(components[i].component); 
      } 
     } 

     return tmp; 
    } 

    load(container: ViewContainerRef, components: any[]): void { 
     // clear 
     container.clear(); 

     for (var i = 0; i < components.length; ++i){ 
      if (components[i].key == 0 || components[i].key == 'site'){ 
       const childComponent = this.componentFactoryResolver.resolveComponentFactory(components[i].component); 

       // at this point we want the "child" component to be rendered into the app.component: 
       container.createComponent(childComponent);   
      }    
     } 
    } 
} 

私はファイル/src/app/components.tsを作成しました。

import { TestComponent } from './test.component'; 

export const mainComponents = [ 
    { key: 0, component: TestComponent },   
]; 

私はファイル/src/app/test.component.tsを作成しました。

import { Component } from '@angular/core'; 

@Component({ 
    template: `test`, 
}) 
export class TestComponent {} 

私は/src/app/app.module.tsを次のように変更しました。私はサーブNG使用してコンパイルすると

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { mainComponents } from './components'; 
import { ComponentLoaderService } from './services/components-loader.service'; 

let componentsToLoad = ComponentLoaderService.getComponents(mainComponents); 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    componentsToLoad 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent], 
    entryComponents: [ componentsToLoad ], 
}) 
export class AppModule { } 

、私はこのエラーを取得：

10% building modules 2/2 modules 0 activeError: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in D:/angularjs/test-app/src/app/app.module.ts, resolving symbol AppModule in D:/angularjs/test-app/src/app/app.module.ts

Answer 1

@NgModule({ 
    declarations: [], 
    exports: [] 
}) 
export class testModule { 
    static withComponents(components: any[]) { 
     return { 
      ngModule: testModule, 
      providers: [ 
       {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: components, multi: true} 
      ] 
     } 
    } 
} 

その他のモジュール：

import { ComponentLoaderService } from './../../services/component-loader.service'; 

let componentsToLoad = ComponentLoaderService.getComponents(); 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     testModule.withComponents([ 
      ...componentsToLoad 
     ]) 
    ], 
    declarations: [ 
     AppComponent, 
     ...componentsToLoad 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

ここANALYZE_FOR_ENTRY_COMPONENTSを利用することによって、あなたはすることができます複数のコンポーネントをNgModule.entryComponentsエントリに動的に追加します。