如何将组件的[ngClass]应用于其子元素

Question

是否有一种方法允许在父元素上设置ngClass，但将其重定向以使类实际应用于子元素？

<!-- Parent Component -->
<app-progress-bar [ngClass]="someObject"><!-- Specify [ngClass] here… -->
</app-progress-bar>

<!-- Child Component -->
<div class="progress-bar" [ngClass]="ngClass"><!-- …but it actually applies here -->
  <progress [max]="max" [attr.value]="value">
  </progress>
</div>

显然，这可以通过在父组件上使用自定义@Input来完成，然后将该输入输入到子组件中的[ngClass]声明中。在没有中介财产的情况下，可以直接进行吗？

Answer 1

您可以使用::ng-deep选择器来实现这一点。css样式将应用于app-progress-bar组件，但样式将在子组件上激活。

:host {
  .some-style-evaluated-by-ng-class {
    ::ng-deep .progress-bar {
      background: red;
    }
  }
}

五深

穿透阴影的后代组合器被废弃，支持正在从主要的浏览器和工具中删除。因此，我们计划在角度上放弃支持(对于/deep/，>>>和：：ng-深层的所有3种支持)。在此之前，应该更倾向于与工具进行更广泛的兼容性。