اعمال CSS به بخشی از متغیر TypeScript از طریق درونیابی در Angular

فرض کنید من یک متغیر به نام data در app.component.ts دارم که از نوع :string است.

در app.component.html من مقدار data را با استفاده از درونیابی رشتهای مانند {{data}} به رابط کاربری نمایش میدهم.

حالا سؤال من این است که هنگام نمایش مقدار در یک رابط کاربری، نیاز دارم تا مقداری css را به بعضی از حروف خاص موجود در یک متغیر data اعمال کنم.

به عنوان مثال:

اپ.component.ts

data : string = "stack overflow"

app.component.html

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

چگونه میتوانیم رنگ پسزمینه کلمه overflow را با استفاده از css برجسته کنیم؟ و من شنیدهام که میتوان از Pipes برای تغییر مقدار استفاده کرد. اما در اینجا من به اعمال css نیاز دارم.

و یک محدودیت دیگر هم وجود دارد، در ابتدا مقدار به مرورگر نمایش داده خواهد شد؛ کلمهای که قرار است برجسته شود از کادر input خواهد آمد.

پاسخ شماره ۱

شما میتوانید از چیزی در این راستا استفاده کنید:

.ts

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

.اچتیامال

  <p [innerHTML]="highlightKeyWord('hello world', 'world')"></p>

پاسخ شماره ۲

یک راهحل استفاده از لوله برای استخراج کلمهی داده شده به عناصر جداگانه <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 چگونه به نظر برسد. شما میتوانید یا کلاس را تنظیم کنید یا مستقیماً سبک را.

موفق باشید!