Question

我想将文本的一部分加粗。

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

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

我希望Here's an加粗。

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

"INFORMATION": "Here's an 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标签，它只打印文本

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);
  }
}

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

Answer 2

如果有angular-translate 2.0，可以执行此操作。

<span translate="{{ 'INFORMATION' }}"></span>

Answer 3

更改@ user4676340的答案，以匹配这样编写的字符串： “ blabla bold blabla”返回“ blabla bold blabla”-Whatsapp样式

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

@Pipe({
  name: 'boldText'
})
export class BoldTextPipe implements PipeTransform {

  constructor(
    private sanitizer: Sanitizer
  ) { }

  transform(value: string): any {
    const regex = /[\*][\w\W]*[\*]/gmi;
    return this.sanitize(this.replace(value, regex));
  }

  replace(str, regex) {
    let matched = str.match(regex);
    matched ? matched.forEach(foundString => {
      foundString = foundString.substring(1, foundString.length - 1);
      str = str.replace(regex, `<b>${foundString}</b>`);
    }) : noop;
    return str;
  }

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

（在组件模板中使用innerHTML）

TS：text =“ blabla bold blabla”

HTML：

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

3 个答案: