在字符串 Angular 的一部分上应用粗体文本

Question

我想将部分文字加粗。

我从特定文件中获取文本。

"INFORMATION": "Here's an example of text",

我希望 Here's an 是大胆的。

"INFORMATION": "<b>Here's an</b> example of text",

"INFORMATION": "<strong>Here's an</strong> example of text"

然后我打印它

<span translate>INFORMATION</span>

而不是得到

这是一个 文本示例

我得到

<b>Here's an</b> example of text

或者

<strong>Here's an</strong> example of text

更新

我正在尝试 innerHTML

 <span [innerHTML]="information | translate"></span>

信息是包含文本的变量

但它忽略了我的 html 标签，它只打印文本

原文由 Hamza Haddad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会做的是一个管道来清理你给它的字符串，并使用正则表达式使它更通用。像这样的 stackblitz ：

https://stackblitz.com/edit/angular-tyz8b1?file=src%2Fapp%2Fapp.component.html

 import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';

@Pipe({
  name: 'boldSpan'
})
export class BoldSpanPipe implements PipeTransform {

  constructor(
    private sanitizer: Sanitizer
  ) {}

  transform(value: string, regex): any {
    return this.sanitize(this.replace(value, regex));
  }

  replace(str, regex) {
    return str.replace(new RegExp(`(${regex})`, 'gi'), '<b>$1</b>');
  }

  sanitize(str) {
    return this.sanitizer.sanitize(SecurityContext.HTML, str);
  }
}

这样，变量内容实际上并没有改变，这意味着您的数据保持不变。

原文由 user4676340 发布，翻译遵循 CC BY-SA 4.0 许可协议