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
How to use Bootstrap Popover with Angular2
提问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:
这给了我这个:
回答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 this
like 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
工作演示在这里