Angular matTooltip呈现为纯文本

Question

我正在迭代角度7中的JSON文档，其中每个迭代对象都有一个句子和一个单词列表。 然后，我正在尝试使用以下方法为句子中的每个匹配单词添加工具提示，

let sentence = ''';
addTooltip(word: string){
    let updatedWord = '<span matTooltip="word decription">'+word+'</span>';
    return this.sentence.replace(new RegExp(word, 'gi'), updatedWord);
}

在HTML中，不是将更新后的单词呈现为工具提示，而是以纯文本形式显示完整的span标记，如下所示，

<span matTooltip="word decription">word</span>

但是当我将相同的行直接放在HTML中时，它完美地显示了工具提示。

我是否需要在打字稿或css中添加任何其他代码才能使其正常工作？

Answer 1

据我所知，您希望从组件到模板添加HTML标记。

为此，您可以绑定它并使用innerHTML属性在模板中应用类似的标记

<div [innerHTML]="sentence"></div>

希望这可以帮助你:)