Popover + Angular + Bootstrap 4.3 Failure - PullRequest
Новая
       15

Popover + Angular + Bootstrap 4.3 Failure

3 голосов
/ 05 июня 2019

Я пытаюсь использовать элемент popover образца кода с сайта getbootstrap.

Окружающая среда: Угловой 8.0.0 JQuery 3.4.1 Popper.js 1.15.0 Bootstrap 4.3.1 ToolTip 1.6.1

angular.json Я загрузил скрипты 

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/popper.min.js",
  "node_modules/tooltip/dist/Tooltip.js",
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]

},

style.css 

@import "~bootstrap/dist/css/bootstrap.css";

index.html 

<script>
  $(function () {
    $('[data-toggle="popover"]').popover()
  })
</script>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<script>
  $(function () {
    $('[data-toggle="popover"]').popover()
  })
</script>

Кажется, что стиль Bootstrap работает нормально, но примеры подсказок и всплывающих окон - нет.

Даже когда я загружаю метод CDN, я не могу заставить их работать.

  1. Нет ошибок компиляции и скрипты [] из angular.json работают

  2. Когда я запускаю тест jquery в index.html, мне говорят, что он не работает. Я ясно не понимаю, что дает директива angular.json scripts []. Что-нибудь еще, что я должен добавить, чтобы сделать библиотеки доступными

  3. Когда я загружаюсь через CDN, я получаю следующую ошибку в консоли:

Uncaught Error: TOOLTIP: Option "sanitizeFn" provided type "window" but expected type "(null|function)"

1 Ответ

3 голосов
/ 11 июня 2019

У меня была та же проблема с подсказкой. Возможный обходной путь - определить функцию sanitize и установить для sanitize значение false, чтобы избежать вызова этой функции.

Мой код до 

jQuery(this.elementRef.nativeElement).tooltip({placement: place, trigger: 'hover'});

Рабочая функция с Angular 8 

jQuery(this.elementRef.nativeElement).tooltip({
   placement: place, trigger: 'hover', sanitize: false, sanitizeFn: content => content
});
...