Javascript 如何在 Angular2 中使用 Bootstrap Popover

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35835231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 18:15:58  来源:igfitidea点击:

How to use Bootstrap Popover with Angular2

javascripttwitter-bootstrapangularpopover

提问by Dylan Harness

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:

我正在尝试使用 Bootstrap 3 popover 来显示 Angular 2 插值模板。这可能吗?这是我到目前为止所拥有的:

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

Which gives me this:

这给了我这个:

enter image description here

在此处输入图片说明

回答by pleerock

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

JQuery 和 Angular 不能很好地配合使用。安装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>

回答by Meir

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.

您也可以尝试我发布的ng2-pop-over库(不要与上面提到的 ng2-popover 混淆)。它很紧凑,你必须添加你的样式,但它可以在没有 jQuery 的情况下解决你的问题。

回答by Pardeep Jain

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 thislike this.

是的,这是可能的,但您不能按照您正在做的方式将插值符号调用到 jQuery 插件中。你必须this像这样直接分配你的动态电子邮件。

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

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

working Demo here

工作演示在这里