如何使用Angular2的Bootstrap Popover

Question

我正在尝试使用Bootstrap 3 popover来显示Angular 2插值模板。这可能吗？以下是我到目前为止的情况：

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

这给了我这个：

Answer 1

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>

Answer 2

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

Answer 3

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

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

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

工作Demo here