如何使放置在innerHTML属性内的Popover起作用? [英] How to make Popovers placed inside a innerHTML attribute work?
本文介绍了如何使放置在innerHTML属性内的Popover起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个printValue变量，在我的角度组件中带有HTML按钮代码，如下所示:
I have this printValue variable with a HTML button code inside my angular component like so:
export class HomeComponent implements OnInit {
printValue = '<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>';
constructor(){}
OnInit(){}
}
问题是，一旦将printValue变量放置在innerHTML内，如何使弹出框起作用，如下所示:
The question is, how do i make the popover work once the printValue variable has been placed inside the innerHTML as seen below:
<p [innerHTML]="printValue"></p>
这样做
<body>
<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>
</body>
直接在html文件中的
可以使弹出窗口起作用.但是，如何使其在innerHTML属性中起作用?
inside an html file directly will enable popovers to work. But how to make it to work inside a innerHTML attribute?
推荐答案
在您的html中
<div #container></div>
然后，在您的ts文件中，
Then, in your ts file,
....
export class MainDataComponent {
@ViewChild('container') container: ElementRef;
loadData(data) {// call this with your data
this.container.nativeElement.innerHTML = data;
}
}
这篇关于如何使放置在innerHTML属性内的Popover起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
