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

【问题标题】：How to make specific part of a string bold in Angular 2如何在Angular 2中使字符串的特定部分变为粗体
【发布时间】：2018-02-11 03:02:21
【问题描述】：

我有一个 HTML 代码如下：

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

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

描述如下：“单击取消取消或单击确认继续”。

我想在描述中第一次取消并确认为粗体。如何使用 css 和 angular 2 做到这一点？

【问题讨论】：

标签： javascript angular css

【解决方案1】：

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

类似这样的： http://jsfiddle.net/Eh2ym/

<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写的。

【讨论】：

【解决方案2】：

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

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

并在模板中将其绑定为 html 字符串：

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

请查看Official Documentation

更新：Working Plunker Example

【讨论】：