填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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()
    
引數

沒有引數。