Question

我具有以下组件的HTML（StackBlitz Example）：

behavior: 'smooth'

我正在按如下方式使用它：

<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时，我需要将CSS样式应用于mk.progress子元素：

test

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

Answer 1

为此使用::ng-deep刺穿阴影的后代组合器（angular doc here）：

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

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

这已被弃用，但是并没有真正的替代品，请参阅SO post about it。

长话短说：继续使用:: ng-deep及其替代方法，直到创建替代产品为止-弃用只是早期通知，因此只要实际发生更改，人们就不会蒙蔽双眼。

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

1 个答案: