Angular 2 - 后代的条件样式

Question

.parent {
  color: blue;
}

.parent * {
  color: red;
}

.child {
  color: black;
}

.grandchild {
  color: green;
}

<div class="parent">
  Parent
  <div>Child
    <div>GrandChild</div>
  </div>
</div>

假设我在 Angular 组件中有一个名为 toggle 的属性。我想为后代切换“.parent *”样式，以便它们的颜色会根据切换状态在红色或蓝色之间变化。我怎样才能通过 ngClass 或 ngStyle 做到这一点？或者有可能吗？谢谢！

Answer 1

只需使用[class.parent]即可

<div [class.parent]="toggle">
 Parent
 <div>Child
  <div>GrandChild</div>
 </div>
</div>

当toggle 为真时，将应用类父级。