按条件向角度选择器的外部 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>

(2( [ngStyle] 在.html文件中

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

和组件.ts

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

(3( [ng类] 选项

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