如何使用：：ng deep访问角度子组件的CSS

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

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

：：吴深{ 应用程序操作员筛选器{ .标题标识卡{ 网格模板列：重复4,1fr； } } } 实现这一点的正确语法是什么？我还愿意接受访问子组件的其他建议，因为我已经读到：：ng deep不可靠，可能很快就会被弃用？

它应该可以工作

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

应该行得通

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

：：ng deep将在将来被弃用是。另一种方法是从子级导入CSS/SCSS文件

parent-component.css

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

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

child-component.css

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

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

更多关于角度css导入的信息。

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

parent-component.css

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

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

child-component.css

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

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

---

有关角度css导入的更多信息。

此问题的解决方案如下：

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

---

!！“重要”是一个重要的添加，因为在没有它的情况下更改被覆盖。

此问题的解决方案是：

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

!！“重要”是一个重要的补充，因为更改在没有它的情况下被覆盖。

对任何CSS规则使用：：ng deep伪类将完全破坏该规则的视图封装，并成为一种全局样式。所以，按照官方的建议，试着将它与：host一起使用

将：：ng deep伪类完全应用于任何CSS规则 禁用该规则的视图封装。任何带有：：ng deep的样式 “应用”将成为一种全局样式。以确定指定样式的范围 对于当前组件及其所有子体，请确保包括 ：主机选择器位于：：ng deep之前。如果：：ng deep组合符为 在不使用：host伪类选择器的情况下使用，样式可能会渗入到 其他组成部分

那么，试试这样的方法：

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

：主机：：ng深度应用程序操作员筛选器{ .标题标识卡{ 网格模板列：重复4,1fr； } } 对任何CSS规则使用：：ng deep伪类将完全破坏该规则的视图封装，并成为一种全局样式。所以，按照官方的建议，试着将它与：host一起使用

将：：ng deep伪类完全应用于任何CSS规则 禁用该规则的视图封装。任何带有：：ng deep的样式 “应用”将成为一种全局样式。以确定指定样式的范围 对于当前组件及其所有子体，请确保包括 ：主机选择器位于：：ng deep之前。如果：：ng deep组合符为 在不使用：host伪类选择器的情况下使用，样式可能会渗入到 其他组成部分

那么，试试这样的方法：

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

：主机：：ng深度应用程序操作员筛选器{ .标题标识卡{ 网格模板列：重复4,1fr； } }

---

ng deep背后的问题是，它使其成为一个全局选择器，以防止您总是需要在它之前使用：host

根据文件：

将：：ng deep伪类应用于任何CSS规则都会完全禁用该规则的视图封装。任何应用了：：ng deep的样式都将成为全局样式。为了将指定样式的范围限定到当前组件及其所有子体，请确保在：：ng deep之前包含：host选择器。如果使用：：ng deep combinator时不使用：host伪类选择器，则该样式可能会渗透到其他组件中

所以正确的答案是：

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

或者从子级导入it样式：

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

而不是像这样使用它：

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

---

ng deep背后的问题是，它使其成为一个全局选择器，以防止您总是需要在它之前使用：host

根据文件：

将：：ng deep伪类应用于任何CSS规则都会完全禁用该规则的视图封装。任何应用了：：ng deep的样式都将成为全局样式。为了将指定样式的范围限定到当前组件及其所有子体，请确保在：：ng deep之前包含：host选择器。如果使用：：ng deep combinator时不使用：host伪类选择器，则该样式可能会渗透到其他组件中

所以正确的答案是：

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

或者从子级导入it样式：

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

而不是像这样使用它：

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

---

Ng deep已弃用，请不要使用它。而是同时使用根级别和组件级别的sass。它工作起来容易多了。如果您感兴趣，我有相关文章。

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

在app-parent.component.ts文件中，将ViewEncapsLuation设置为“无”

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);
  }
}

在app parent.c中 component.ts文件将viewEncapsoluation设置为“无”

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);
  }
}