angular - Popover + Angular + Bootstrap 4.3 失败

Question

我正在尝试使用来自 getbootstrap 站点的示例代码弹出框元素。

环境: Angular 8.0.0JQuery 3.4.1波普尔.js 1.15.0 Bootstrap 4.3.1工具提示 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"]

},

样式.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. 当我在 index.html 中运行 jquery 测试时，我被告知它没有运行。显然我不明白 angular.json scripts[] 指令提供了什么。我还应该添加其他内容以使库可用吗？

3. 当我通过 CDN 加载时，我在控制台中收到以下错误:

Uncaught Error :TOOLTIP:选项“sanitizeFn”提供了类型“window”，但需要类型“(null|function)”

Answer 1

我对工具提示有同样的问题。一种可能的解决方法是定义一个 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
});