angular2 bootstrap4工具提示不呈现html，而弹出窗口确实

Question

我正在使用angular2和bootstrap4。酥料饼正确呈现原始的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我不是前端开发人员，所以任何能以更好的条件解释它的人都是受欢迎的。