Question

我正在尝试使用getbootstrap站点中的示例代码popover元素。

环境：角8.0.0 jQuery的3.4.1 Popper.js 1.15.0 引导程序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"]

}，

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方法加载，我似乎也无法使它们正常工作。

没有编译错误，angular.json的脚本[]似乎可以正常运行
当我在index.html中运行一个jQuery测试时，我被告知它没有运行。显然，我不明白angular.json scripts []指令提供了什么。我还应该添加其他内容以使这些库可用吗？
通过CDN加载时，在控制台中出现以下错误：

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

Answer 1

我在工具提示上也遇到了同样的问题。可能的解决方法是定义一个清理函数并将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
});

Answer 2

我遇到了同样的问题，这对我有帮助，请检查它。

https://getbootstrap.com/docs/4.3/getting-started/javascript/#util

在加载工具提示功能时，只需定义工具提示的“ sanitizeFn”属性，即可执行以下操作：

DATABASE_ROUTERS = ['routers.AuthRouter', 'routers.ApplicationRouter']

Popover + Angular + Bootstrap 4.3失败

2 个答案: