按条件将样式添加到 Angular 选择器的外部 div答案

【问题标题】：Add style to outer div of Angular selectors by conditions按条件将样式添加到 Angular 选择器的外部 div
【发布时间】：2020-04-19 12:51:20
【问题描述】：

我有三个组件可以创建这样的层次结构：

<div>c1 is the root</div>
|
 ------ c2 is inisde c1
         |
          -------- c3 is inisde c2

如何按特定顺序将样式添加到由 c2 > c3 组成的特定 div？

【问题讨论】：

对每个组件单独使用class 对您没有帮助吗？

标签： css angular css-selectors styles

【解决方案1】：

您可以添加如下条件样式：

(1) [样式] 选项

<div [style.color]="c1Condition ? 'red' : 'black' ">
     c1 is the root
     <div [style.color]="c2Condition ? 'red' : 'black' ">
          c2 is inisde c1
          <div [style.color]="c2Condition ? 'red' : 'black' ">
               c3 is inisde c2
          </div>
     </div>
</div>

(2) .html 文件中的 [ngStyle]

<div [ngStyle]="currentStyles1">
   Hello World
</div>

在component.ts中

this.currentStyles1 = {     
       'font-style':  this.canSave  ? 'italic' : 'normal',  
       'color':       this.hasError ? 'red'   : 'black',     
       'font-size':   this.hasError ? '24px'   : '12px'   
};

(3) [ngClass] 选项

<div [ngClass]="false ? 'c_on' : 'c_off'">Hello world! </div>

【讨论】：

但这通常是有角度的。原始 css 有什么选择吗？
@JanTestowy - 你的意思是 .html .css？这似乎是老派的做法。如果您使用的是 Angular，我建议您使用 Angular 方式条件样式。