如何将popovers放置在innerHTML属性中?

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属性中工作?

Mal*_*wan 4

在你的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)