Popover + Angular + Bootstrap 4.3 失败答案

【问题标题】：Popover + Angular + Bootstrap 4.3 FailurePopover + Angular + Bootstrap 4.3 失败
【发布时间】：2023-03-25 10:05:01
【问题描述】：

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

环境：角 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>

引导样式似乎可以正常工作，但示例工具提示和弹出框却不行。

即使我使用 CDN 方法加载，我似乎也无法让这些工作。

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

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

【问题讨论】：

看起来有一个不需要 jQuery 的 Angular Popper 库 - npmjs.com/package/angular-popper
你真的应该引入一个有角度的引导库。像这样使用 jquery 在 Angular 中很混乱，因为页面生命周期不一样 - 如果你想使用带有 Angular 渲染按钮等的 jquery 事件，请查看这里。stackoverflow.com/questions/42124360/…
啊，好的。我一直在阅读的文档在这一点上还不是很清楚。这就说得通了。我担心将 angular npm angular 模块和 ng-bootstrap 模块混合会导致冲突。但这是有道理的。我会试试这个并报告回来。谢谢你的建议。
@dmoo 再次感谢您的建议。我了解到的是 Angularized-Bootstrap 模块有 2 个竞争版本。我选择使用 ngx-bootstrap。从主流引导库加载 CSS 并为 Angular 加载 ngx-bootstrap 模块已经解决了我的问题并使设置变得不那么混乱，因为我不需要担心加载 javascript 库。再次感谢！
在将 Angular 7 升级到 Angular 8 后，我遇到了同样的问题。它在 Angular 7 中运行良好。仍然没有修复。

标签： angular bootstrap-4 popover

【解决方案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
});

【讨论】：

【解决方案2】：

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

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

你只需要在加载tooltip函数时定义tooltip的“sanitizeFn”属性，你可以做如下：

$('[data-toggle="tooltip"]').tooltip({
    sanitizeFn: function (content) {return content;}
});

【讨论】：