爲什麼[ngClass]指令顯示在括號內

Question

據我所知，指令的使用沒有DOM元素的括號。然而，herengClass顯示用括號：

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

爲什麼？

Answer 1

指令使用不帶括號的，但如果有相同名稱作爲指令綁定內部指令類，它應該被包裹在括號中。這發生在ngClass指令。下面是從here相關的源代碼：

@Directive({selector: '[ngClass]'}) 
export class NgClass implements DoCheck { 
    ... 

    @Input('class') 
    set klass(v: string) { 
     ... 
    } 

    @Input() 
    set ngClass(v: string|string[]|Set<string>|{[klass: string]: any}) { 

所以我們可以看到，有定義ngClass輸入。基本上，原代碼可以改寫這樣講清楚：

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

或者這樣使用class輸入綁定：

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

Answer 2

檢查Property binding

<some-element [ngClass]="expression">...</some-element> 

告訴角到評估表達和綁定到它。

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

在這裏，你只是設置一個字符串文字。使用直接字符串文字既可以正常工作，也可以不使用變量或表達式。

情況下，這將關係：

如果你有分量

this.class = {this.class1: this.isClass1,this.class2:isCass2} 

定義一個類的對象，並將其設置在你的HTML。

[ngClass]="class" 

或者你可以有一個像三元操作一樣的表達式來驗證你是否需要有一個類。

[ngClass]="isClass1?Class1:Class2"