Блог

Я пытаюсь внедрить всплывающие подсказки из bootstrap 4 в свое веб-приложение, согласно документации bootstrap, я должен инициализировать всплывающие подсказки с помощью этого кода

$(function () { $('[data-toggle="tooltip"]').tooltip() }) (Сделано в app.component.ts )

Также в angular.json следует поставить popper.min.js перед bootstrap.min.js (Готово)

Очевидно, что я уже установил npm bootstrap и jquery, и, читая в другом сообщении, они выполняют два импорта в app.component.ts

import 'bootstrap' and import * as $ from 'jquery' ;

И они также добавляют AfterViewChecked в реализации класса AppComponent именно для инициализации, например

ngAfterViewChecked(){ $('[data-toggle="tooltip"]').tooltip();}

Когда я делаю все это, всплывающие подсказки действительно работают, но import 'bootstrap' создают некоторую проблему с остальной частью bootstrap.js потому что мой выпадающий список тегов li перестает работать. Кто-нибудь может мне помочь? Спасибо!

Вместо jQuery я предлагаю вам использовать библиотеки Angular Bootstrap, такие как:

• https://ng-bootstrap.github.io/#/home
• https://valor-software.com/ngx-bootstrap/#/

Они облегчат вашу работу, и вам не придется добавлять jQuery.

О всплывающей подсказке:

1 . Установите Ngx Bootstrap

 ng add ngx-bootstrap
  

2 — Добавьте TooltipModule в свой AppModule

 import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  imports: [TooltipModule.forRoot(),...]
})
export class AppModule(){}
  

3 — Использовать функциональность всплывающих подсказок

 <button type="button" class="btn btn-primary" tooltip="Lorem ipsum.">
  Simple demo
</button>
  

Вы можете найти более подробную информацию здесь: https://valor-software.com/ngx-bootstrap/#/tooltip .