How to use Bootstrap Popover with Angular2

问题

I am trying to get a Bootstrap 3 popover to display an Angular 2 interpolated template. Is this possible? Here is what I have so far:

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

Which gives me this:

回答1:

JQuery and Angular don't play very well together. Install ng2-popover:

npm i ng2-popover

and use it like this:

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

回答2:

You can also try a library I published ng2-pop-over (not to be confused with ng2-popover mentioned above). It is compact and you'll have to add your styles but has what it takes to solve your problem without jQuery.

回答3:

yes this is possible but you cannot call interpoleted symbol into jQuery plugin the way you are doing. you have to assign your dynamic email directly using this like this.

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

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

working Demo here

来源：https://stackoverflow.com/questions/35835231/how-to-use-bootstrap-popover-with-angular2