如何在Angular组件中访问本地CSS类名以样式化第三方组件

我太懂这种困扰了！想给ngx-datatable加自定义行样式，又不想破坏Angular的样式封装——用全局样式或者::ng-deep总觉得不够优雅，毕竟Angular的样式隔离就是为了避免样式污染嘛。你想的没错，确实可以获取到Angular转换后的类名，然后传递给第三方组件，这样就能完美匹配样式了。

下面是具体的实现步骤：

步骤1：在模板中添加一个隐藏的"类名载体" #

在你的组件模板里，加一个隐藏的<div>，给它应用你定义的自定义类。这个元素的作用就是让Angular对它的类名进行转换，我们之后可以从它身上拿到转换后的类名：

<!-- 隐藏的类名载体，用来获取转换后的类名 -->
<div #classHolder class="my-class" style="display: none;"></div>

<ngx-datatable [rowClass]="getRowClass"></ngx-datatable>

步骤2：在组件类中获取转换后的类名 #

通过@ViewChild获取这个隐藏元素的引用，然后在组件初始化的时候提取它的类名（这个就是Angular转换后的带前缀的类名）：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  @ViewChild('classHolder') classHolder!: ElementRef;
  private transformedRowClass!: string;

  ngOnInit() {
    // 从隐藏元素上拿到转换后的类名
    this.transformedRowClass = this.classHolder.nativeElement.classList[0];
  }

  getRowClass(row) {
    // 返回转换后的类名给ngx-datatable
    return this.transformedRowClass;
  }
}

步骤3：保持原有的样式定义不变 #

你的scss文件不需要做任何修改，Angular依然会对这个类名进行转换，和我们传递给ngx-datatable的类名完全匹配：

.my-class {
  background: green;
}

为什么这个方法有效？ #

• 隐藏的<div>属于当前组件的DOM节点，Angular会按照样式隔离规则给它的my-class加上唯一前缀（比如app-dashboard-my-class）。
• 我们提取这个转换后的类名传递给ngx-datatable的行，行的类名就会和scss中被转换后的类名完全一致，样式自然就能生效。
• 全程没有破坏样式封装，这个自定义样式只会作用在当前组件内的ngx-datatable行上，不会影响其他组件。

内容的提问来源于stack exchange，提问作者A. Bertrand