применить жирный текст к части строки Angular - PullRequest
Новая
       52

применить жирный текст к части строки Angular

0 голосов
/ 19 марта 2019

Я хотел бы выделить часть текста жирным шрифтом.

Я получаю текст из определенного файла.

"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

UPDATE

Я пытаюсь innerHTML 

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

Информация является переменной, содержащей текст

но он игнорирует мои HTML-теги, печатает только текст

Ответы [ 2 ]

2 голосов
/ 19 марта 2019

То, что я бы сделал, это труба, которая очищает строку, которую вы ей даете, и используете регулярное выражение, чтобы сделать ее более общей.Что-то вроде этого 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);
  }
}

Таким образом, содержимое переменной фактически не изменяется, то есть ваши данные остаются нетронутыми.

0 голосов
/ 19 марта 2019

Вы можете сделать это с помощью angular-translate 2.0 , если он у вас есть. 

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