时间戳

首页 > 解决方案 > 如何使用 Ng-Bootstrap 6 在 Angular 9 中正确实现 Tooltip

ng-bootstrap - 如何使用 Ng-Bootstrap 6 在 Angular 9 中正确实现 Tooltip

问题描述

尝试使用 Ng-Bootstrap 在 Angular 9 应用程序中实现工具提示。我在 app.module 中导入了 NgbModule，但根本不会显示任何工具提示。app.module 代码：

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    NgbModule,
    SharedComponentsModule,
    AppRoutingModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(){}
}

我让 Tooltip 工作，但我必须NgbModule在组件的父模块 (SharedComponentsModule) 中导入NgbTooltip并在组件本身中导入（除了在 app.module 中导入 NgbModule 之外） - 认为这些步骤是不必要的。

SharedComponents模块代码：

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { SharedComponentsRoutingModule } from './shared-components-routing.module';
import { searchComponent } from './search/search.component';

@NgModule({
  declarations: [
    searchComponent
  ],
  imports: [
    CommonModule,
    NgbModule,
    SharedComponentsRoutingModule
  ],
  exports: [
  ]
})
export class SharedComponentsModule { }

搜索组件代码：

import { Component, OnInit } from '@angular/core';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

searchComponents.html 代码：

<button type="button" class="btn btn-outline-secondary mr-2" placement="left" ngbTooltip="Tooltip on left">Tooltip on left</button>

index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
      <title>Search App</title>
      <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=yes">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-rfs/bootstrap-rfs.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <script src="https://kit.fontawesome.com/************.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=*********************************"></script>
</body>
</html>

问题 - 是否有必要在使用 NgbModule 的组件的父模块（除了 app.module）中导入 NgbModule 并在 Ng 所在的组件中导入 NgbTooltip（或任何其他 Ng-Bootstrap 组件） -Bootstrap 组件正在使用它来工作吗？Ng-Bootstrap 文档不建议这样做，但这是我能够使其工作的唯一方法。那么关于我可能做错了什么或我应该调整任何其他设置以避免不必要的导入的任何线索？

标签： ng-bootstrapangular9

解决方案

不，无需导入NgbModule即可使工具提示正常工作。

正如文档中提到的那样：

您只能导入带有您需要的组件的模块，而不是使用 NgbModule 导入整个库，例如。分页和警报。

在这种情况下，生成的捆绑包会更小。

您的问题是您尝试导入NgbTooltip，而应该导入模块 NgbTooltipModule：

import { NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  imports: [NgbTooltipModule],
})

就是这样，现在一切都应该正常了。

推荐阅读