ng2-bootstrap

Question

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

在我的应用程序中，我使用 @ViewChild 将两个 Timepicker 组件加载到一个父组件中。我最初是通过直接在 AppModule 中声明 ExampleComponent 来实现的。这种方法效果很好。

我现在想将 ExampleComponent 移动到它自己的模块 (ExampleModule) 中。虽然模块是新的，但 ExampleComponent 中没有代码更改。但是，当将 Timepicker 导入 ExampleComponent 时，我现在收到 "No provider for 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

我认为问题在于您将 ng2-bootstrap 导入新模块的方式，请尝试仅导入时间选择器：

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

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

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

This way is even better than import ng2Bootstrap directly becuse you only import the module that you need and not all the modules.

Answer 2

我找到问题了。除了 Raul's 建议导入 TimepickerModule 而不仅仅是组件之外，还需要明确提供 TimpickerConfig class，即导入并添加到提供者列表中。

Pseudo-code:

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

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

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

ng2-bootstrap - No provider for TimepickerConfig when imported into a separate module

angular