ngx-bootstrap / tabs 3.1.1在内部模块中给出StaticInjectorError（AppModule）[TabHeadingDirective - > TabDirective]

Question

我正在尝试在角度6项目内的内部模块中使用ngx-bootstrap / tabs组件，但我在控制台中出现此错误，并且渲染崩溃：

   ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TabHeadingDirective -> TabDirective]: 
  StaticInjectorError(Platform: core)[TabHeadingDirective -> TabDirective]: 
    NullInjectorError: No provider for TabDirective!
Error: StaticInjectorError(AppModule)[TabHeadingDirective -> TabDirective]: 
  StaticInjectorError(Platform: core)[TabHeadingDirective -> TabDirective]: 
    NullInjectorError: No provider for TabDirective!
...

如果我在app.module.ts中导入此组件一切正常，当我尝试在子模块（称为共享）中使用它时，我在顶部得到错误。模块的配置文件（shared.module.ts）如下所示：

...
import { TabsModule } from 'ngx-bootstrap/tabs';
@NgModule({
  imports: [
...
TabsModule,
...
],
})
export class SharedModule { }

我不知道如何解决它，有人可以帮助我吗？

Answer 1

您需要在导入模块.forRoot（）的末尾添加如下：TabsModule.forRoot()

UPDATE

您还需要将SharedModule导入到根模块，例如的AppModule

Answer 2

您必须验证没有像TabModule中那样命名的变量或属性。

我的情况是：

我有一个自定义compoentent与属性@Input() tab: string = '0';参数来选择标签集中的选项卡。

ERROR Error: StaticInjectorError(AppModule)[TabDirective -> TabsetComponent]: 
  StaticInjectorError(Platform: core)[TabDirective -> TabsetComponent]: 
    NullInjectorError: No provider for TabsetComponent!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:691) ...

这是我的自定义组件：

<my-component [datos]="datos" [tab]="tab"></my-component>

然后我改名为tab为tabID

<my-component [datos]="datos" [tabId]="tabId"></my-component>

和@Input() tabId: string = '0';

我也为TabModule的ngx-bootstrap改变了NgbModule的de ng-bootstrap

那解决了我。你的问题是什么？