Question

据我所知，DOM元素上没有括号使用指令。但是，here ngClass显示为括号：

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

为什么？

Answer 1

检查Property binding

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

告诉angular 评估表达式并绑定它。

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

这里你只是设置一个字符串文字。使用直接字符串文字可以正常工作，但不能使用变量或表达式。

重要的情况：

如果您在组件

中定义了类对象

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

并在你的html中设置它。

[ngClass]="class"

或者您可以使用类似三元操作的表达式来验证是否需要一个类。

[ngClass]="isClass1?Class1:Class2"

Answer 2

指令在没有括号的情况下使用，但如果在指令类中有一个与指令同名的绑定，则它应该用括号括起来。使用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>

为什么[ngClass]指令用括号显示

2 个答案: