如何从变量中启用ngx-bootstrap工具提示的[innerHTML]。

Question

我可以成功地让工具提示与ngx-bootstrap工作时，例如我做。

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

但是如果我需要动态设置div的innerHtml，比如说从一个变量中设置，并将innerHtml设置为：

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

并将innerHtml设置成这样

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

工具提示永远不会被渲染。

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

Answer 1

通过在ng-template中使用[innerHtml]，你可以显示任何动态html。

模板。

<ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
<button type="button" class="btn btn-success"
        [tooltip]="popTemplate">
  Show me tooltip with html
</button>

component:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-tooltip-dynamic-html',
  templateUrl: './dynamic-html.html'
})
export class DemoTooltipDynamicHtmlComponent {
  html = `<span class="btn-block btn-danger well-sm">Never trust not sanitized HTML!!!</span>`;
}

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.comeditangular-jftbrm。

如果你使用像

let content = ''; 这个你不能在模板内使用。