angular2-template - 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>';
  }

tooltip 和 popover 的初始化方式相同

$(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 我不是前端开发人员，所以欢迎任何能用更好的术语解释它的人。