如何在 Angular2 中使用 Bootstrap Popover

Posted 2023-02-22

【中文标题】如何在 Angular2 中使用 Bootstrap Popover

【英文标题】：How to use Bootstrap Popover with Angular2

【发布时间】：2016-06-20 12:01:26

【问题描述】：

我正在尝试让 Bootstrap 3 弹出框显示 Angular 2 插值模板。这可能吗？这是我目前所拥有的：

    $('.ba-header--user-menu').popover(
      placement: 'bottom',
      toggle: 'popover',
      trigger: 'focus',
      html: true,
      content: 'user.email'
    );

这给了我这个：

【问题讨论】：

你能添加 plunkr 吗？ Bootstrap 和外部 JS 文件在这里确实存在已知问题。即使我在 Bootstrap 和数据切换方面也面临类似的问题。有些是开箱即用的，有些则不是。

最好摆脱bootstrap.js并使用angular-ui-bootstrap，但如果你想继续，你需要在指令中初始化jquery插件以确保在代码运行时元素存在。至于编译不会发生的interpolation大括号...获取指令中的内容

我的印象是 angular2 的 angular-ui-bootstrap 被称为 github.com/ng-bootstrap/core 并且只支持 3 个组件 atm。不幸的是，popover 似乎不是其中之一

为什么不尝试 Angular ui 引导程序。 angular-ui.github.io/bootstrap

@Naga2Raja 我们在这里谈论 Angular 2 和 Bootstrap 3

【参考方案1】：

是的，这是可能的，但你不能像你正在做的那样将插值符号调用到 jQuery 插件中。 您必须像这样使用this 直接分配您的动态电子邮件。

ngOnInit()
   $('#abc').popover(
      placement: 'bottom',
      toggle: 'popover',
      title: 'khcksahkdfs'
      html: true,
      content: this.name
    );
 

 <a id="abc">Toggle popover</a>

工作Demo here

【讨论】：

但是在这种情况下 Angular2 (click) 指令在 popover html 中不起作用，因为 jquery 是克隆 popover html 然后在浏览器上显示。

对于使用 webpack 的，添加 const $ = require('jquery');使用 jquery 快捷方式 $.

你是如何导入 popover 的？ ng 没有编译.. nvm，错过了npm install --save @types/bootstrap

我现在不确定，但您不需要导入 @type/bootstrap 相同的，而是必须在组件顶部声明 any 类型的 $。并且 popover 将使用您的 angular-cli.json 文件中提到的 bootstrap.js 来使用。

【参考方案2】：

JQuery 和 Angular 不能很好地结合在一起。安装ng2-popover:

npm i ng2-popover

并像这样使用它：

<span popover="content to be shown in the popover">
    element on which this popover is applied.
</span>

【讨论】：

有很多问题。在自我推销之前，请修复它们github.com/pleerock/ng2-popover/issues

它不是推广，它是一种帮助。它是一个简单的组件，展示了 popover 的工作原理，我没有什么可以推广的。如果您不喜欢某些内容，请免费获得此帮助，请发送 PR、贡献或创建分叉并维护您自己的版本

@pleerock 我收到错误消息：（SystemJS）ctorParameters.map 不是函数。虽然我的角度版本是 2.1.2。您能否提出可能导致此问题的原因？

看起来不错的解决方案。但我得到与@angular2

相同的错误（ctorParameters.map 不是函数）

哟！谢谢！ Bootstrap popover 与 angular 的 2 ngModel 一起使用！看valor-software.com/ng2-bootstrap/index-bs4.html#/popover“动态HTML”

【参考方案3】：

您也可以尝试我发布的库 ng2-pop-over（不要与上面提到的 ng2-popover 混淆）。它很紧凑，你必须添加你的样式，但它可以在没有 jQuery 的情况下解决你的问题。

【讨论】：

当我尝试 ng2-popover 和 ng2-pop-over 时，我得到了完全相同的错误 - “ctorParameters.map 不是函数”。也许我做错了什么。我查了一下，似乎有关于 Angular 版本的东西。我什至运行了 npm 更新。没有任何改善。

可以以编程方式显示 ng2-pop-over 吗？我没有看到任何相关文档。

是的，寻找“程序化”这个词，你会看到一个例子