Угловая подсказка 5 + Bootstrap не работает

Question

Что я делаю не так?

Я пытаюсь заставить Bootstrap Tooltip работать в Angular 5. У нас есть библиотека Javascript, настроенная через нижний колонтитул страницы index.html, как рекомендовано. Документы в Bootstrap используют JQuery для получения доступа к элементам, а затем вызывают для них функцию tooltip().

Думая, что я мог бы сделать то же самое, но используя функцию getElementById для получения дескриптора кнопки, я написал следующее (кнопка - это элемент, для которого определена всплывающая подсказка):

  ngAfterViewInit(){
    let button = document.getElementById('tooltipBtn');
    button.tooltip();
  }

Код шаблона (отдельный файл):

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="tooltipBtn">
  Tooltip on bottom
</button>

Ошибка, которую я получаю (в консоли браузера):

ERROR
Error: button.tooltip is not a function

Answer 1

Вы можете использовать ng-bootstrap

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

Импорт NgbModule в модуль приложения

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

 imports: [
    NgbModule.forRoot(),
  ],

HTML:

 <button class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip Text..!!">

Answer 2

Итак, есть несколько вещей, которые я должен был сделать, чтобы это работало должным образом.

Angular.JSON (Angular 6)

В этом файле необходимо включить ссылки на Javascript и CSS для начальной загрузки. Этот файл раньше назывался .angular-cli.json для предыдущих версий, и он на один уровень глубже, поэтому, если у вас есть этот файл, вам нужно сделать его ../node_modules. В любом случае у вас будет что-то вроде следующего:

  "styles": [
   "src/styles.scss",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/tether/dist/js/popper.js",
   "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Это загрузит соответствующий CSS и Javascript в ваш веб-пакет, чтобы он был доступен для всех. Очень важно загружать их в правильном порядке, как показано на рисунке. Варианты не пройдут. Более подробные инструкции можно найти здесь .

*. Component.ts

В каждом из ваших компонентов, чтобы использовать оператор $, все, что вам нужно сделать, это набрать в верхней части файла

declare var $;

Вот и все. Вы не получите автозаполнение, но приложение будет работать после компиляции.

Работа с другими библиотеками JS

Это также относится, например, к lodash (оператор _) и многим другим библиотекам Javascript. Также возможно использование многих библиотек, например,

import * as $ from 'jquery' - однако по какой-то причине я не нашел это надежным с самой библиотекой jquery. Он работал для многих других, включая moment.js и shortid.