如何在 [innerHTML] 上从变量启用 ngx-bootstrap 工具提示

Question

我可以成功地获得使用 ngx-bootstrap 的工具提示，例如：

<div><button tooltip="Tooltip works!">Button with a Tooltip</button></div>

但是，如果我需要动态设置div 的 innerHtml，请从变量中说：

let content = '<button tooltip="This tooltip wont work">Button with a Tooltip</button>';

并按如下方式设置 innerHtml：

<div [innerHTML]="content"></div>

工具提示永远不会呈现。

我假设我需要做其他事情，但我找不到答案。任何帮助，不胜感激。

Answer 1

InnerHTML 示例，该示例在 innerHTML 中包含 html，但是如果需要，您可以使用变量：

<ng-template #content>
<div [innerHTML]=“‘<div>Button with a        Tooltip</div>’”>
</div>
</ng-template>
<div><button [tooltip]="content" placement=“top”></button></div>

Answer 2

你必须像下面这样使用它：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
content;
newvalue:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>';
constructor(private sanitizer:DomSanitizer){
}
ngOnInit() {
this.content = this.sanitizer.bypassSecurityTrustHtml('<button style="border:1px solid #3333">Button with a Tooltip</button>')
}
}

https://stackblitz.com/edit/angular-jftbrm

如果你使用喜欢

let content = '';您不能在模板中使用它。