如何使用 ::ng-deep 访问 Angular 子组件的 CSS答案

【问题标题】：How to access CSS of Angular child component with ::ng-deep如何使用 ::ng-deep 访问 Angular 子组件的 CSS
【发布时间】：2021-01-07 22:46:10
【问题描述】：

我正在尝试使用::ng-deep 访问和编辑子组件的 CSS 类。我尝试了下面提供的代码的不同版本，但无法访问 CSS。 HTML组件的结构如下：

这就是我尝试从父组件访问 CSS 并更改类的 grid-template-columns 属性的方式：

::ng-deep{
  app-operator-filter{
    .header-logos-card{
      grid-template-columns: repeat(4,1fr);
    }
  }
}

实现此目的的正确语法是什么？我也对访问子组件的其他建议持开放态度，因为我读到 ::ng-deep 不可靠并且可能很快就会被弃用？

【问题讨论】：

标签： css angular sass ng-deep

【解决方案1】：

对任何 CSS 规则使用 ::ng-deep 伪类将完全破坏该规则的 view-encapsulation 并成为全局样式。因此，请尝试按照 Angular 官方 Doc 的建议将其与 :host 一起使用。

将::ng-deep 伪类完全应用于任何 CSS 规则禁用该规则的视图封装。任何带有::ng-deep的样式应用成为一种全局样式。为了范围指定的样式到当前组件及其所有后代，请务必包括 ::ng-deep 之前的 :host 选择器。如果 ::ng-deep 组合子是在没有 :host 伪类选择器的情况下使用，样式可以渗入其他组件。

所以，试试这样的：

:host ::ng-deep app-operator-filter {
  .header-logos-card {
    grid-template-columns: repeat(4,1fr);
  }
}

【讨论】：

【解决方案2】：

它应该可以工作

::ng-deep .header-logos-card {
  grid-template-columns: repeat(4,1fr);
}

【讨论】：

【解决方案3】：

::ng-deep 将来会被弃用，是的。另一种方法是从子级导入 CSS/SCSS 文件。

父组件.css

.header-logos-card {
  grid-template-columns: repeat(4, 1fr);
}

子组件.css

@import './path/to/parent-component.css';

更多关于 Angular css 导入 here.

【讨论】：

【解决方案4】：

::ng-deep 背后的问题在于它使它成为一个全局选择器，以防止您需要始终在它之前使用 :host。

根据文档：

将 ::ng-deep 伪类应用于任何 CSS 规则会完全禁用该规则的视图封装。应用 ::ng-deep 的任何样式都将成为全局样式。为了将指定样式限定为当前组件及其所有后代，请确保在 ::ng-deep 之前包含 :host 选择器。如果在没有 :host 伪类选择器的情况下使用 ::ng-deep 组合器，则样式可能会渗透到其他组件中。

所以正确答案是：

:host {
  ::ng-deep {
    .header-logos-card {
      grid-template-columns: repeat(4,1fr);
    }
  }
}

或者从孩子那里导入样式：

@import './path/to/parent-component.css';

而不是像这样使用它：

:host {    
  .header-logos-card {
    grid-template-columns: repeat(4, 1fr);
  }
}

【讨论】：

【解决方案5】：

Ng deep 已弃用，请勿使用。而是同时使用根级别和组件级别的 sass。它更容易工作。如果你有兴趣，我有这方面的文章。

【讨论】：

dev.to/jwp/angular-10-ng-deep-and-host-pseudo-classes-1kbg

【解决方案6】：

这个问题的解决办法是这样的：

:host ::ng-deep app-operator-filter{
  .header-logos-card {
    grid-template-columns: repeat(4,1fr) !important;
  }
}

!important 是一个重要的补充，因为没有它，更改就会被覆盖。

【讨论】：

【解决方案7】：

在 app-parent.component.ts 文件中将 viewEncapsolution 设置为 none。

import { Component,ViewEncapsulation} from '@angular/core';

@Component({
   selector: 'app-parent-selector',
   templateUrl: './app-parent.component.html',
   styleUrls: ['./app-parent.component.css'],
   encapsulation:ViewEncapsulation.None
})

在 app-parent.component.css 文件中，通过子选择器包装子 css 类。

app-operator-filter {
  .header-logos-card {
    grid-template-columns: repeat(4,1fr);
  }
}

【讨论】：