如何在Angular 2中使字符串的特定部分变为粗体

Question

我有一个HTML代码如下：

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

我正在使用ngTranslate翻译说明。描述是我的翻译文件中的一个键，将显示该键的值。

说明如下：＆＃34;点击取消取消或点击确认继续＆＃34;。

我想首先取消并在说明中确认为粗体。我怎么能用css和angular 2做到这一点？

Answer 1

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

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

在模板中将其绑定为html string：

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

请查看Official Documentation

更新：Working Plunker Example

Answer 2

在使用翻译时，您必须拆分文本以使字符串的特定部分变为粗体。

这样的事情：

<span>before slash / after slash</span><br>
<span>before slash / after slash</span><br>
<script>
$('span').html(function(i, old){
   var htm= old.split('/'); 
    return '<strong>'+ htm[0] +'</strong>'+htm[1];    
})
<script>

但上面的例子是javascript。