ng2-bootstrap - TimepickerConfigのプロバイダが別のモジュールにインポートされていない場合

Question

ng2-bootstrap v1.2.5を使用しています。

私のアプリでは、@ViewChildを使用して2つのTimepickerコンポーネントを親コンポーネントに読み込みます。もともとAppModuleで直接ExampleComponentを宣言することでこれを行いました。このアプローチはうまくいきました。

ここで、ExampleComponentを独自のモジュール（ExampleModule）に移動します。このモジュールは新しいものですが、ExampleComponentにコードの変更はありません。しかし、TimepickerをExampleComponentにインポートすると、「TimepickerConfigのプロバイダがありません！」というメッセージが表示されます。エラー。ここで

は擬似コードです：

/** 
* AppModule 
*/ 
@NgModule({ 
    bootstrap: [ AppComponent ], 
    declaration: [ AppComponent ], 
    imports: [ 
     BrowserModule, 
     Ng2BootstrapModule, 
     ExampleModule, 
     ... etc. 
    ] 
}) 
export class AppModule {} 


/** 
* ExampleModule 
*/ 
@NgModule({ 
    declarations: [ ExampleComponent ], 
    imports: [ 
     CommonModule, 
     Ng2Bootstrap, 
     ... etc. 
    ], 
    exports: [ ExampleComponent ] 
}) 
export class ExampleModule {} 


/** 
* ExampleComponent 
*/ 
import {Component, ViewChild} from '@angular/core'; 
import {TimepickerComponent} from 'ng2-bootstrap/timepicker'; 

export class ExampleComponent { 
    @ViewChild('startTimepicker') startTimepicker: TimepickerComponent; 
    @ViewChild('endTimepicker') endTimepicker: TimepickerComponent; 

    ... etc. 
} 

新しいインポートエラーの原因は何？

Answer 1

私は問題を把握しました。 Raul'sコンポーネントの代わりにTimepickerModuleをインポートすることの提案に加えて、TimpickerConfigクラスを明示的に提供する必要があります。つまり、インポートしてプロバイダリストに追加する必要があります。

擬似コード：

import {TimepickerModule, TimepickerConfig} from 'ng2-bootstrap/timepicker'; 

@NgModule({ 
    declarations: [ ExampleComponent ], 
    imports: [ 
     CommonModule, 
     TimepickerModule, 
     ... etc. 
    ], 
    exports: [ ExampleComponent ], 
    providers: [ TimepickerConfig ] 
}) 
export class ExampleModule {} 

Answer 2

私だけの時間ピッカーをインポートしようと、問題はあなたに新しいモジュールをNG2-ブートストラップをインポートする方法だと思います：

import { TimepickerModule } from 'ng2-bootstrap/timepicker'; 

とあなたの輸入に配列は次のようになります。

を

@NgModule({ 
    declarations: [ ExampleComponent ], 
    imports: [ 
     CommonModule, 
     TimepickerModule, 
     ... etc. 
    ], 
    exports: [ ExampleComponent ] 
}) 
export class ExampleModule {} 

この方法では、直接あなたが のみすべてのモジュールを必要なモジュールをインポートしていないng2Bootstrap becuse輸入よりも優れています。