Как правильно реализовать всплывающую подсказку в Angular 9 с помощью Ng- Bootstrap 6 - PullRequest
Новая
       35

Как правильно реализовать всплывающую подсказку в Angular 9 с помощью Ng- Bootstrap 6

0 голосов
/ 16 апреля 2020

Попытка реализовать подсказку в приложении Angular 9 с помощью Ng- Bootstrap. Я импортировал NgbModule в app.module, но никакие подсказки не отображались вообще. Код app.module: 

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

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

Я заставил всплывающую подсказку работать, но мне пришлось импортировать NgbModule в родительский модуль компонента (SharedComponentsModule) и импортировать NgbTooltip в самом компоненте (в дополнение к импорту NgbModule в app.module) - не считал эти шаги необходимыми.

SharedComponentsModule code: 

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 code: 

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

index. html code: 

<!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 документация не предлагает делать это, но это единственный способ, которым я могу заставить это работать. Таким образом, какие-либо подсказки о том, что я могу делать неправильно или о любых других настройках, которые я должен настроить, чтобы избежать ненужного импорта?

...