将 CSS class 应用于组件的子元素

Question

我有以下组件的 HTML (StackBlitz Example):

<div class="measure">
  <ng-container *ngTemplateOutlet="labelTemplate; context: templateContext"></ng-container>
  <div class="chart">
    <div class="state" [style.width.%]="progress">&nbsp;</div>
  </div>
  <ng-container *ngTemplateOutlet="valueTemplate; context: templateContext"></ng-container>
</div>

我是这样使用的：

<mk-progress class="test" [minimum]="0" [maximum]="100" [current]="40">
  <div *label class="label">Label</div>
  <div *value="let item" class="value">{{ item.progress }}%</div>
</mk-progress>

当 mk.progress 有 class 时，我需要将 css 样式应用于 mk-progress 个子元素 test:

:host(.test) div.measure {
  border: 1px solid orange;
}

:host(.test) div.label {
  border: 1px solid red;
}

:host(.test) div.value {
  border: 1px solid green;
}

边框应用于度量，但不适用于标签和值。为什么

Answer 1

为此使用 ::ng-deep shadow-piercing 后代组合子 (angular doc here):

:host(.test) ::ng-deep div.label {
  border: 1px solid red;
}

:host(.test) ::ng-deep div.value {
  border: 1px solid green;
}

这已被弃用，但没有真正的替代品，请参阅。

Long story short: Keep using ::ng-deep and its alternatives until a replacement is created - the deprecation is just an early notice so that people aren't blindsided whenever the actual change materializes.

将 CSS class 应用于组件的子元素

Apply CSS class to component's child elements

css

angular

angular6

angular7