Применение css к некоторой части переменной машинописи путем интерполяции в Angular - PullRequest
Новая
       28

Применение css к некоторой части переменной машинописи путем интерполяции в Angular

2 голосов
/ 28 февраля 2020

Допустим, у меня есть переменная с именем data в app.component.ts, которая имеет тип :string.

В app.component.html Я показываю значение data в пользовательском интерфейсе с использованием строковой интерполяции как {{data}}.

Теперь мой вопрос заключается в том, чтобы при отображении значения в пользовательском интерфейсе мне нужно было применить некоторые css к некоторым конкретным c буквам, присутствующим в data переменная.

Например:

app.component.ts 

data : string = "stack overflow"

app.component. html 

<p>{{data}}</p>

Как выделить цвет фона переполнения слова с помощью css ?. И я слышал, что Трубы могут быть использованы для изменения значения. Но здесь мне нужно подать css.

И еще одно ограничение, изначально значение будет отображаться в браузере; выделенное слово будет приходить из поля input.

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Вы можете использовать что-то из строк:

.ts 

  highlightKeyWord(sentence: string, keyWord: string) {
      sentence = sentence.replace(keyWord, 
          `<span style="background-color: #35a5f8;">${keyWord}</span>`);
      return this.sanitizer.bypassSecurityTrustHtml(sentence);
  }

. html

  <p [innerHTML]="highlightKeyWord('hello world', 'world')"></p>
1 голос
/ 28 февраля 2020

Одним из решений является использование pipe для извлечения данного слова в отдельные <span> элементы: 

@Pipe({
  name: 'letterByLetter'
})
export class LetterByLetter implements PipeTransform {
  transform(value: string): string {
    return value
      .split('')
      .map((letter) => {
        return `<span>${letter}</span>`;
      })
      .join('');
  }
}

Тогда в компоненте есть возможность использовать трубу таким образом <div [innerHTML]="data | letterByLetter"></div>. Обратите внимание, что я использовал внутренний Html, но вы можете использовать DomSanitizer вместо этого - что должно быть лучше)

После этого вы сможете решить, как должен выглядеть элемент span. Вы можете установить класс или стиль напрямую.

Удачи!

...