为什么[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"