关于angular：ng-bootstrap不显示工具提示

ng-bootstrap not displaying tooltip

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

中添加了这些行

1
2
3
4
5
6
7

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

@NgModule({
imports: [
NgbModule
]
})

使用命令

安装了ng-bootstrap

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

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

The exact method will be slightly different for the root (top-level)
module for which you should end up with the code similar to (notice
NgbModule.forRoot()):

1
2
3
4
5
6
7
8
9
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgbModule:

1
2
3
4
5
6
7
8
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...]
})
export class OtherModule {
}

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

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

这是工具提示的工作示例：

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

请与您的代码进行比较。