根据条件将样式添加到Angular选择器的外部div

Question

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

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

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

Answer 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>

。HTML文件中的[（2）[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>