如何从角度组件中访问本地 css 类名答案

【问题标题】：How to access local css class names from within the angular component如何从角度组件中访问本地 css 类名
【发布时间】：2019-08-09 12:24:25
【问题描述】：

我需要从 Angular 组件中访问生成的 css 类名，以便为第 3 方组件设置样式。

Angular 对本地 css 类名进行了一些神奇的转换以启用范围。我需要将一些自定义样式应用于ngx-datatable 组件。为此，我需要将自定义类名传递给它。由于 Angular 对类名的作用，这些不再匹配。

将类名添加到全局范围或使用::ng-deep 都可以，但是我不想破坏封装。

dashboard-component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
    getRowClass(row){
        return 'my-class';
    }
}

dashboard-component.scss

.my-class {
   background: green;
}

dashboard-component.html

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

按照我的看法，我应该能够从组件中访问一些对 css 类的引用，比如 this._styles，然后它将在运行时携带生成的类的名称，所以我可以这样做

getRowClass(row){
    return this._styles['my-class'];
}

【问题讨论】：

你可以设置encapsulation to ViewEncapsulation.None

标签： css angular

【解决方案1】：

我认为您无法将您的样式传播到ngx-datatable。

您可以在 @component 中使用 encapsulation: ViewEncapsulation.None，但请务必小心使用它，因为它会导致一些奇怪的 CSS 行为。

接下来，您可以为您的 dashboard.html 文件创建一个容器，例如：

<div class="dashboard-container">
  <ngx-datatable></ngx-datatable>
</div>

在您的dashboard.scss 中，您可以引用父容器

.dashboard-container {
  .my-style{}
}

【讨论】：

创建容器有什么好处？
如果你不设置encapsulation: ViewEncapsulation.None这个样式就不行了?
@A.Bertrand 只是为类创建一个包装器，因此不会影响其他组件使用相同的类
可以是一个好的包装器是这样的ngx-datatable { .my-style {} }??
我在这里用过?stackblitz.com/edit/…

【解决方案2】：

只要把css类放在全局样式文件中，否则你需要使用::ng-deep，所以我的建议是把ngx-datatable放在全局样式文件中

检查 ngx-datatable demo asset/app.css 那里做了同样的事情

另一个选项，您可以在组件上设置encapsulation: ViewEncapsulation.None，类名将相同

    @Component({
      selector: "app-demo",
      templateUrl: "./demo.component.html",
      styleUrls: ["./demo.component.scss"],
      encapsulation:ViewEncapsulation.None
    })
   export class DemoComponent implements OnInit {

demo.component.scss

ngx-datatable {
  .green-color {
    background:green;

    & div {
      color :#fff;
    }
  }
}

将封装设置为无或将样式放入全局样式文件中，因为这两种方式都将是全局样式，无需任何更改

demo ?

【讨论】：