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

ng-deep

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

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

1 个答案: