ng-bootstrap不显示工具提示

Question

我想显示一个工具提示。 我去了ng-bootstrap并集成了该代码。 正在获取控制台错误。

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for 
NgbTooltipConfig!
Error: No provider for NgbTooltipConfig!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at NgModuleRef_.get (core.es5.js:10562)
at resolveDep (core.es5.js:11050)
at createClass (core.es5.js:10920)

在app.module.ts中添加了这些行

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [    
    NgbModule
  ]
})

使用命令安装了ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Answer 1

您应该导入NgbModule.forRoot()而不是NgbModule 。

对于根（顶层）模块，确切的方法会稍有不同，您应该以类似于（注意NgbModule.forRoot() ）的代码结束该根（顶层）模块：

 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { } 

应用程序中的其他模块可以简单地导入NgbModule ：

 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...] }) export class OtherModule { } 

有关更多详细信息，请阅读：

https://ng-bootstrap.github.io/#/getting-started

---

这是tooltip的工作示例：

http://plnkr.co/edit/AVylfgSqv5iLVi73LGz7?p=preview

请与您的代码进行比较。

Answer 2

将NgbTooltipConfig添加到提供程序

@NgModule({
  imports: [    
    NgbModule
  ],
  providers: [
     NgbTooltipConfig
  ]
})

并将此CSS添加到您的style.css中

.tooltip{
  opacity:1!important;
}