Angular 5 编译期间未拾取 CSS 类

Question

我在我的 Angular 5 元素中使用 ag-grid。我正在尝试将 css 类添加到单元格中。在查看了有关 ag-grid 单元样式的大量文档后，我尝试使用 cellClass 和 cellClassRules。

样式在scss文件中定义，例如:

.readonly-cell{ background-color: #cccccc; }

然后将 scss 文件包含在组件中:

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss']
})

然后我将类应用到列:

{headerName:'Power', field:'power', width:150, cellClass:'readonly-cell'}

网格本身工作正常。问题是power 电池不会改变颜色。当我在 Firefox 中检查渲染的 HTML 时，我可以看到单元格确实应用了类 readonly-cell 。但样式详细信息未在规则面板上列出。

这让我认为这些类在编译过程中没有被拾取。我不认为这是 ag-grid 的问题，而是选择样式类的方式的问题。

有什么方法可以解决为什么类和定义没有包含在编译中的问题吗？

Answer 1

您会得到这种行为，因为您尝试通过 CSS 规则定位的元素是在 Angular 组件外部生成的，并且 Angular 添加了特殊属性，以便组件 CSS 仅适用于该组件(而不适用于其子组件、添加的任何 DOM 节点) Angular 之外等)。您应该使用 Angular 并在与您的样式完全相同的组件中构建样式所需的所有 HTML，或者禁用该功能。您可以使用 ViewEncapsulation.None 禁用它:

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

或者在样式表中使用 /deep/，如下所述:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep