如何通过变量在[innerHTML]上启用ng-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

您必须按如下方式使用它：

export class DashboardComponent implements OnInit {

  content='';

  constructor() { }

  ngOnInit() {
    this.content = '<button tooltip="This tooltip wont work">Button with a 
    Tooltip</button>'; // this you can declare anywhere in different function
   }
}

如果您使用类似

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

参考：https://github.com/aviboy2006/my-portal-angular/blob/master/src/app/components/dashboard/dashboard.component.ts#L11