Angular中动态插入DOM后的HTML元素样式不生效问题

这是Angular的组件样式封装（View Encapsulation） 在搞鬼！默认情况下，Angular会给组件内的DOM元素自动添加一个专属属性（比如[_ngcontent-xxx]），同时把你的SCSS样式转换成带这个属性选择器的规则，确保样式只作用于组件内静态渲染的元素。而你用document.createElement创建的动态元素没有这个专属属性，所以组件SCSS里的样式就匹配不到它了。

下面给你几个可行的解决办法，按推荐程度排序：

1. 使用Angular的Renderer2创建元素（推荐） #

这是最符合Angular最佳实践的方式，Renderer2会帮你自动处理样式封装的属性，确保动态元素能继承组件样式。

修改你的accommodation-view-data.component.ts：

import {AfterViewInit, Component, ElementRef, OnInit, Renderer2, 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(private renderer: Renderer2) { } // 注入Renderer2

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // 用Renderer2创建元素
    const starIconElement = this.renderer.createElement('i');
    this.renderer.addClass(starIconElement, 'bi');
    this.renderer.addClass(starIconElement, 'bi-star-fill');
    // 追加到目标元素
    this.renderer.appendChild(this.starRatingElem.nativeElement, starIconElement);
  }
}

这样创建的元素会自动带上Angular的专属属性，组件SCSS里的样式就能正常生效了。

2. 修改组件的样式封装模式 #

如果不想用Renderer2，可以把组件的样式封装改成None，这样组件的SCSS样式会变成全局样式，能作用于动态创建的元素。不过要注意避免样式污染，最好给样式加父类限定：

首先修改组件元数据：

@Component({
  selector: 'app-accommodation-view-data',
  templateUrl: './accommodation-view-data.component.html',
  styleUrls: ['./accommodation-view-data.component.scss'],
  encapsulation: ViewEncapsulation.None // 添加这一行
})

然后修改你的SCSS，给样式加上父类限定，避免影响其他组件的<i>元素：

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

这样只有.star-rating下的<i>元素会应用这个样式，不会污染全局。

3. 使用::ng-deep穿透样式（不推荐长期使用） #

::ng-deep可以让组件样式穿透到子元素（包括动态创建的元素），不过这个语法已经被标记为废弃，未来可能会被移除，所以只建议临时用用：

修改你的SCSS：

::ng-deep .star-rating i{
  font-size: 1.6rem;
  padding: 0 0.25rem ;
  color: #ffbe0f;
}

这样样式就能作用到动态创建的<i>元素上了，但要注意这个方法的兼容性风险。

内容的提问来源于stack exchange，提问作者Dhanusha_Perera07