javascript - 如何在 Angular 2 中将字符串的特定部分设为粗体

Question

我有如下 HTML 代码:

<div class="row">
      <div class="col-12" style="margin-top:15px;margin-bottom:10px">
            {{"description" | translate}}
      </div>
</div>

我正在使用 ngTranslate 来翻译描述。描述是我的翻译文件中的一个key，会显示key的值。

描述如下所示:“点击取消取消或点击确认继续”。

我想把描述中的第一个cancel和confirm做成粗体。我如何使用 css 和 angular 2 来做到这一点？

Answer 1

您应该使用[innerHTML]，在您的翻译中使用 html 标签，如下所示:

{
    "description": "click <strong>cancel</strong> to cancel or click <strong>confirm</strong> to proceed"
}

然后在模板中将其绑定(bind)为 html 字符串:

<div [innerHTML]="'description' | translate"></div>

请检查Official Documentation

更新:Working Plunker Example