Angular中如何通过TS动态修改::ng-deep作用元素的CSS值

Angular 默认启用视图模拟封装，组件样式只会匹配当前模板直接声明的元素。ngb-progressbar 是第三方组件，其内部渲染的.progress-bar节点不属于当前组件直接声明的模板元素，所以不带::ng-deep的样式选择器无法穿透组件边界命中内部元素，和TS能不能访问元素没有直接关系。

以下三种方案都可以实现动态修改样式，按推荐优先级排序：

• 方案1：CSS变量传值（最推荐，无DOM操作、不依赖第三方组件私有属性） #

  保留::ng-deep的基础样式，把需要动态修改的属性值替换为CSS变量，TS只需要修改当前组件宿主的变量值即可，不需要查询内部元素。
  1. 调整组件样式代码：

  ::ng-deep div.bg-success.progress-bar{
      background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
      /* 绑定CSS变量，设置默认值100% */
      background-size: var(--progress-bg-size, 100%) !important;
      background-repeat: no-repeat !important;
  }
  

  2. TS代码中动态修改变量值：

  import { ElementRef } from '@angular/core';
  
  export class YourComponent {
    constructor(private hostEl: ElementRef<HTMLElement>) {}
  
    // 需要更新样式时调用这个方法，传入目标值比如"60%"
    updateProgressSize(size: string) {
      this.hostEl.nativeElement.style.setProperty('--progress-bg-size', size);
    }
  }
  

• 方案2：自定义类查询DOM（不依赖组件私有API，兼容性好） #

  给ngb-progressbar加自定义标识类，直接从当前组件根节点查询内部进度条元素，直接写入行内样式，完全不需要写::ng-deep样式。
  1. 模板代码加自定义类：

  <ngb-progressbar class="custom-progress" type="success" [value]="progressValue"></ngb-progressbar>
  

  2. TS代码查询元素修改样式：

  import { ElementRef, AfterViewInit } from '@angular/core';
  
  export class YourComponent implements AfterViewInit {
    constructor(private hostEl: ElementRef<HTMLElement>) {}
    progressSize = '100%';
  
    ngAfterViewInit() {
      this.applyBarStyle();
    }
  
    applyBarStyle() {
      const barEl = this.hostEl.nativeElement.querySelector('.custom-progress .progress-bar.bg-success') as HTMLElement;
      if (!barEl) return;
      barEl.style.setProperty('background', 'linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%)', 'important');
      barEl.style.setProperty('background-repeat', 'no-repeat', 'important');
      // 动态设置目标属性
      barEl.style.setProperty('background-size', this.progressSize, 'important');
    }
  }
  

• 方案3：通过模板引用变量获取组件实例（代码直观） #

  在模板上给进度条加模板引用变量，通过@ViewChild拿到组件实例后访问内部元素修改样式，适合熟悉ng-bootstrap组件结构的场景。
  1. 模板加引用变量：

  <ngb-progressbar #progressBar type="success" [value]="progressValue"></ngb-progressbar>
  

  2. TS代码获取实例操作：

  import { ViewChild, AfterViewInit } from '@angular/core';
  import { NgbProgressbar } from '@ng-bootstrap/ng-bootstrap';
  
  export class YourComponent implements AfterViewInit {
    @ViewChild('progressBar') progressBarComp!: NgbProgressbar;
    progressSize = '100%';
  
    ngAfterViewInit() {
      this.updateBarStyle();
    }
  
    updateBarStyle() {
      // 访问组件实例内部的原生元素节点
      const barEl = (this.progressBarComp as any)._el?.nativeElement?.querySelector('.progress-bar') as HTMLElement;
      if (!barEl) return;
      barEl.style.background = 'linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%)';
      barEl.style.backgroundRepeat = 'no-repeat';
      barEl.style.backgroundSize = this.progressSize;
    }
  }
  

注意：方案3访问的_el属于组件私有属性，大版本升级时如果ng-bootstrap调整内部属性名可能会失效，生产环境优先选前两种方案。

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