为啥内置属性指令用方括号括起来？

Posted 2023-02-22

【中文标题】为啥内置属性指令用方括号括起来？

【英文标题】：Why are built-in attribute directives surrounded by square brackets?为什么内置属性指令用方括号括起来？

【发布时间】：2020-07-02 23:46:26

【问题描述】：

为什么我们需要为内置的 Angular 指令使用方括号，例如 ngClass、ngStyle？

例子：

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

为什么不使用下面的类似代码？

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

【参考方案1】：

所有内置指令，无论是属性还是结构，都用方括号表示。 *ngFor 和 *ngIf 是 [ngForOf] 和 [ngIf] 的语法糖（或 shorthand syntax）。见here。

为什么是方括号？因为内置指令使用@Input 装饰器将数据绑定到它们（例如：ngIf 和ngClass）。如之前所知，data are bound 到 @Input 属性使用方括号。

【参考方案2】：

在模板语法上检查这个good answer。 您还将在Angular official docs中检索更多详细信息

用你的例子，你可以简单地做：

<some-element class="first second">...</some-element>

因为在这个例子中，你没有使用ngClass 指令的特性。在这种情况下，只需通过 html 属性设置常规的class。

但是要调用 Angular 指令，您应该使用方括号。 那么在这种情况下：

<some-element [ngClass]="'first': isFirst, 'second': isSecond"></someElement>

如果本地属性isFirst 是true，NgClass 指令会将first 类名添加到some-element，对于second 也是如此。

每个指令都有一个 selector 供 Angular 模板编译器调用。 对于NgClass，选择器为[ngClass]。

源代码摘录：

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

查看这些资源的更多详细信息： - Angular directives - Angular code for NgClass