angular - 如何从变量在 [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

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

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

如果你使用 like

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