css - 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 为真时，父类将被应用。