2017-05-31 14 views
2

私はアプリケーションに使用するすべてのコンポーネントを保存する設定ファイルとしてサービスを提供しています。これらのコンポーネントはすべて、私のメインコンポーネントからentryComponentsにロードする必要があります。私は、サービスからコンポーネントの配列をメインコンポーネントのデコレータにロードします。私は次のことをしたいの主要コンポーネントでデコレータ内のサービスを角度4で使用する

@Injectable() // This is the service, I want to call getComponents() later on. 
export class Configuration { 
    modules = [ 
     ChartModule 
    ] 

    components = [ 
     PiechartComponent 
    ] 

    getModules(): NgModule[] { 
     return this.modules; 
    } 

    getComponents(): Component[] { 
     return this.components; 
    } 
}; 

@Component({ 
    selector: 'dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'], 
    entryComponents: Configuration.getComponents() // Here I call the service. 
}) 

助けてください!

答えて

0

私はバレルと定数を一度に作成することでこの問題を解決しました。そうすれば、メインモジュール(と他のファイル)にすべてのコンポーネントをインポートする必要はなく、すべての配列と設定にアクセスできます。

import { TestModule } from './widgets/testmodule/test.module'; 
import { TestComponent } from './widgets/testmodule/test.component'; 

私はすべてのモジュールとコンポーネントを別々の設定ファイルに入れたいので、これを同時にバレルと定数に入れます。すべてのモジュールとコンポーネントを1つの場所にインポートします。

ここでは、これらのモジュールとコンポーネントをすべてアレイに追加します。後でメインモジュールとコンポーネントのデコレータでこれらの配列を使用します。

export const initialization: ConfigurationConfig = { 
    modules: [ 
    TestModule, 
    AnotherModule, 
    CarModule, 
    PocModule 
    ], 
    entryComponents: Array<any> = [ 
    TestComponent, 
    AnotherComponent, 
    CarComponent, 
    PocComponent 
    ]; 
} 

私のメインモジュールでは、この定数をバレルからすべてのインポートでインポートできるようになりました。

import * as Configuration from './configuration.barrel'; 

@Component({ 
    selector: 'df-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.scss'], 
    entryComponents: Configuration.initialization.entryComponents 
}) 
関連する問題