Блог

Я хотел добавить элемент «i» в качестве дочернего элемента в HTMLDivElement, но стили не применяются к недавно вставленному элементу «i».

Как я могу убедиться, что применяю те же стили к недавно добавленному элементу «i»? Я хочу применить стили, которые я установил в файле scss для нового элемента. (когда я вставляю новый элемент в файл .ts, я могу установить те же стили, используя JS(TS), но я намерен использовать стили scss/css, есть ли способ использовать стили scss/css для вновь добавленных элементов?)

accommodation-view-data.html

 <div class="star-rating" #starRating>
  <i class="bi bi-star-fill"></i> <!-- styles are applied to this element successfully -->
</div>
 

размещение-просмотр-данные.компонент.scss

 i{
  font-size: 1.6rem;
  padding: 0 0.25rem ;
  color: #ffbe0f;
}
 

размещение-просмотр-данные.компонент.ts

 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-accommodation-view-data',
  templateUrl: './accommodation-view-data.component.html',
  styleUrls: ['./accommodation-view-data.component.scss']
})
export class AccommodationViewDataComponent implements OnInit, AfterViewInit {

  @ViewChild('starRating')
  starRatingElem!: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    /* When I append the the new element to the DOM,
    * the styles that I have set in the scss file, are not applied for the new element */
    const starIconElement = document.createElement('i');
    starIconElement.classList.add('bi');
    starIconElement.classList.add('bi-star-fill');
    (this.starRatingElem.nativeElement as HTMLDivElement).append(starIconElement);
  }

}
 

Это нормальное поведение, когда вы пишете стиль, который интегрирован в styleUrls, каждый отдельный класс переработан, чтобы быть специфичным для компонента, это область стиля (обратите внимание i[ng-content-lep-c52] на скриншот ниже).

Поэтому добавлять элемент в dom, как вы это делаете, не рекомендуется, вместо этого предпочитайте переключать его с помощью ngIf или здесь для звезд с помощью ngFor, иначе вам будет трудно сделать его динамичным и связать значения с моделью компонентов.

Как вы можете видеть на этом скриншоте, первый элемент правильно соответствует стилю области видимости, в то время как новый элемент-нет.

НЕ РЕКОМЕНДУЕТСЯ И НЕ РЕКОМЕНДУЕТСЯ: чтобы обойти это, вы можете использовать ::ng-deep псевдокласс, чтобы сделать стиль глобальным, и для этого переопределить стиль с областью действия, как вы можете видеть на этом скриншоте, исходящем из этого стекблитца.

Вы можете найти более подробную информацию о стилях в angular здесь