Dal*_*ale 5 html javascript popover angular
我有这个printValue变量,在我的角度组件中有一个HTML按钮代码,如下所示:
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(){}
}
Run Code Online (Sandbox Code Playgroud)
问题是,一旦printValue变量放在innerHTML中,我如何使popover工作,如下所示:
<p [innerHTML]="printValue"></p>
Run Code Online (Sandbox Code Playgroud)
这样做
<body>
<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>
</body>
Run Code Online (Sandbox Code Playgroud)
在html文件中直接启用popovers工作.但是如何使它在innerHTML属性中工作?
在你的html中
<div #container></div>
Run Code Online (Sandbox Code Playgroud)
然后,在你的 ts 文件中,
....
export class MainDataComponent {
@ViewChild('container') container: ElementRef;
loadData(data) {// call this with your data
this.container.nativeElement.innerHTML = data;
}
}
Run Code Online (Sandbox Code Playgroud)