CSS-ის გამოყენება TypeScript-ის ცვლადის კონკრეტულ ნაწილზე ინტერპოლაციის საშუალებით Angular-ში

ვთქვათ, მაქვს ცვლადი სახელად data ფაილში app.component.ts, რომელიც არის ტიპის :string.

app.component.html-ში ვაჩვენებ data-ს მნიშვნელობას UI-ში სტრიქონული ინტერპოლაციის გამოყენებით, მაგალითად {{data}}.

ახლა ჩემი კითხვა ასეთია: როცა მნიშვნელობას UI-ში ვაჩვენებ, უნდა გამოვიყენო გარკვეული css კონკრეტული ასოებზე, რომლებიც data ცვლადშია.

მაგალითად:

აპპ.component.ts

data : string = "stack overflow"

აპპ.კომპონენტი.html

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

როგორ გამოვარჩიოთ სიტყვა overflow-ის ფონის ფერი, გამოყენებით css?. და მსმენია, რომ Pipes შეიძლება გამოიყენოთ მნიშვნელობის შესაცვლელად. მაგრამ აქ მე მჭირდება css-ის გამოყენება.

და კიდევ ერთი შეზღუდვა არსებობს, თავდაპირველად მნიშვნელობა ბრაუზერში იქნება ნაჩვენები; გამოტანილი სიტყვა მოვა input ყუთიდან.

პასუხი #1

თქვენ შეგიძლიათ გამოიყენოთ რაღაც მსგავსი:

.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>

პასუხი #2

ერთ-ერთი გზა არის გამოყენებით მილის, რათა განსაზღვრული სიტყვა განაწილდეს ინდივიდუალურ <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>. გაითვალისწინეთ, მე გამოვიყენე innerHtml, მაგრამ შეგიძლიათ გამოიყენოთ DomSanitizer-ის ნაცვლად - რაც უკეთესი იქნებოდა)

ამის შემდეგ შეგიძლიათ გადაწყვიტოთ, როგორ უნდა გამოიყურებოდეს span ელემენტი. შეგიძლიათ პირდაპირ მიუთითოთ ან კლასი, ან სტილი.

გისურვებ წარმატებას!