填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

NgClass

从 HTML 元素上添加和移除 CSS 类。

Adds and removes CSS classes on an HTML element.

查看"说明"...

NgModule

选择器

属性

属性说明
@Input('class')
klass: string
只写
@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }
只写

说明

CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型:

The CSS classes are updated as follows, depending on the type of the expression evaluation:

  • string - 会把列在字符串中的 CSS 类(空格分隔)添加进来,

    string - the CSS classes listed in the string (space delimited) are added,

  • Array - 会把数组中的各个元素作为 CSS 类添加进来,

    Array - the CSS classes declared as Array elements are added,

  • Object - 每个 key 都是要处理的 CSS 类,当表达式求值为真的时候则添加,为假则移除。

    Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

<some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
      
      <some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
    

方法

ngDoCheck()
      
      ngDoCheck()
    
参数

没有参数。