Question

我正在使用ng2-bootstrap v1.2.5。

在我的应用中，我使用@ViewChild将两个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-bootstrap导入新模块的方式，尝试仅导入时间选择器：

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

并且在您的导入数组中将如下所示：

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

这种方式甚至比直接导入ng2Bootstrap要好只导入您需要的模块而不是所有模块。

ng2-bootstrap - 导入到单独模块时没有TimepickerConfig的提供程序

2 个答案: