Как использовать Bootstrap Popover с Angular2

Я пытаюсь получить popup файл Bootstrap 3 для отображения интерполированного шаблона Angular 2. Это возможно? Вот что я до сих пор:

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

Что дает мне это:

Ответ 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>

Ответ 2

Вы также можете попробовать библиотеку, которую я опубликовал ng2-pop-over (не следует путать с ng2-popover, упомянутым выше). Он компактный, и вам придется добавлять свои стили, но для решения вашей проблемы без jQuery требуется то, что нужно.

Ответ 3

да, это возможно, но вы не можете вызывать интерполяционный символ в плагин jQuery так, как вы это делаете. вам нужно назначить динамическую электронную почту, используя this, как это.

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

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

работает Демо здесь