Question

尝试使用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(){}
}

我得到了工具提示，但是我必须在组件的父模块（SharedComponentsModule）中导入NgbModule，并在组件本身中导入NgbTooltip（除了在app.module中导入NgbModule）-认为这些步骤不是必需的。

SharedComponentsModule代码：

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 { }

searchComponents代码：

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，并在该组件中导入NgbTooltip（或与此相关的任何其他Ng-Bootstrap组件） Ng-Bootstrap组件在哪里工作？ Ng-Bootstrap文档不建议这样做，但这是我能够使其工作的唯一方法。因此，关于我可能做错了什么的任何线索或我应该调整的其他任何设置，以避免不必要的导入？

Answer 1

否，没有必要导入NgbModule来使工具提示起作用。

正如所提到的in the documentation：

除了使用NgbModule导入整个库外，您只能导入带有所需组件的模块，例如。分页和警报。

在这种情况下，生成的包将更小。

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

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

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

就是这样，一切都应该正常工作。

如何使用Ng-Bootstrap 6在Angular 9中正确实现工具提示

1 个答案: