angular2 bootstrap4 工具提示不呈现 html，而 popover 会

Question

我正在使用 angular2 和 bootstrap4。 Popover 正确地将原始 html 呈现为粗体文本 asdf

<img src="assets/images/1.jpg"
                             data-container="body" data-toggle="popover" data-html="true" data-placement="top"
                             [attr.data-content]="getM()"/>

但是，工具提示呈现为包含标签的纯 <b>asdf</b> 文本

<img src="assets/images/2.jpg"
                              data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
                              [attr.title]="getM()"/>

组件方法getM:

  public getM(): string {
    return '<b>asdf</b>';
  }

工具提示和弹出窗口的初始化方式相同

$(function () {
  $('[data-toggle="tooltip"]').tooltip({container: 'body'});
  $('[data-toggle="popover"]').popover({container: 'body'});
})

谁能解释一下这是为什么以及如何解决？这似乎与初始化顺序有关，但我只是不知道该往哪里看。

Answer 1

好吧，问题是我的元素（附有工具提示）是动态创建的。

确切地说，我的服务延迟了 1 秒。当新数据到达时，我的组件中的 <img> 元素被重新创建，但是 $('[data-toggle="tooltip"]') 选择器不适用于动态元素。

相反，我不得不使用这个选择器

 $("body").tooltip({selector: '[data-toggle="tooltip"]'});

现在它按预期工作了。

PS我不是前端开发人员，所以欢迎任何能更好地解释它的人。

angular2 bootstrap4 工具提示不呈现 html，而 popover 会

angular2 bootstrap4 tooltip doesn't render html, while popover does

angular2-template

bootstrap-4

twitter-bootstrap-tooltip