如何使用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>

在這里工作演示