web-dev-qa-db-fra.com

Comment utiliser Bootstrap Popover avec Angular2

J'essaie d'obtenir un popover Bootstrap 3 pour afficher un modèle interpolé Angular 2). Est-ce possible? Voici ce que j'ai jusqu'à présent:

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

Ce qui me donne ceci:

enter image description here

javascripttwitter-bootstrapangularpopover
12
Dylan Harness

JQuery et Angular ne jouent pas très bien ensemble. Installer ng2-popover :

npm i ng2-popover

et utilisez-le comme ceci:

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

Vous pouvez également essayer une bibliothèque que j'ai publiée ng2-pop-over (à ne pas confondre avec ng2-popover mentionné ci-dessus). Il est compact et vous devrez ajouter vos styles mais il a ce qu'il faut pour résoudre votre problème sans jQuery.

2
Meir

oui c'est possible mais vous ne pouvez pas appeler le symbole interpolé dans le plugin jQuery comme vous le faites. vous devez attribuer votre e-mail dynamique directement en utilisant this comme ceci.

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

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

fonctionne Démo ici

1
Pardeep Jain