web-dev-qa-db-ja.com

使用方法Bootstrap Popover with Angular2

Bootstrap 3ポップオーバーを取得して、Angular 2補間テンプレートを表示しようとしています。これは可能ですか？

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

これは私にこれを与えます：

enter image description here

javascripttwitter-bootstrapangularpopover
12
Dylan Harness

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>
12
pleerock

また、私が公開したライブラリを試すこともできます ng2-pop-over （上記のng2-popoverと混同しないでください）。コンパクトでスタイルを追加する必要がありますが、jQueryを使用せずに問題を解決するために必要な機能を備えています。

2
Meir

はい、これは可能ですが、インターポールされたシンボルをjQueryプラグインに呼び出すことはできません。このようにthisを使用して動的な電子メールを直接割り当てる必要があります。

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

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

作業中 デモはこちら

1
Pardeep Jain