[class] [attr] [style] 指令如何工作

Question

我检查了 ngStyle、ngClass 指令here，但我仍然无法理解它们是如何工作的：

<div [attr.role]="myAriaRole">
<div [class.extra-sparkle]="isDelightful">
<div [style.width.px]="mySize">

内置指令不select这样的属性：class.extra-sparkle。 select这样的html属性能有什么样的selector？哪个内置指令处理这个？

据我所知 html 带有点 (style.width.px) 的属性已经不合法了。显然，带有方括号的字符串不会直接作为属性传递。但是在哪里完成呢？哪个指令捕获这些符号？

Answer 1

_{以下代码片段摘自 Angular.io 文档。}

你指的是 Binding target.

<img [src]="heroImageUrl">

第一个 div 引用了 Attribute binding。

<table>
    <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
</table>

第二个 div 引用 Class binding.

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

不过建议使用NgClass.

最后一个 div 引用了 Style binding。信不信由你，第三个 div 实际上是合法的（或至少在 Angular）。

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

不过，建议使用NgStyle代替。

因此，在这种情况下，它将变量的值绑定到元素。（除了 class，它将评估 isDelightful 变量是否为 true。）

<div [attr.role]="myAriaRole"></div>
<div [class.extra-sparkle]="isDelightful"></div>
<div [style.width.px]="mySize"></div>

这里有一个 Stackblitz demo 供您试用。 :)

Answer 2

正如@Edric 指定的那样here，物质是绑定目标。我首先认为所有这些都是由内置指令处理的

[attr.role]
[class.extra-sparkle]
[style.width.px]

喜欢ngClass and ngStyle，但不是。 None 其中是指令，它们只是这个的同义词：

bind-attr.role
bind-class.extra-sparkle
bind-style.width.px

和绑定前缀在模板解析器中编译 here. The "bind thing" is not a directive, it is build-in feature that compiler already handles all the bound properties, attributes etc。

Answer 3

你是对的，这些不是指令。

Angular 编译器为每个具有视图节点的组件创建一个视图工厂。对于每个视图节点，编译器使用位掩码定义一组绑定类型。有不同的binding types，因此在变化检测期间执行不同类型的操作以反映组件中的变化class。

您可能知道允许更新属性:

的标准输入机制

<div [prop]="myAriaRole">

编译器为其创建 TypeProperty 绑定：

TypeProperty = 1 << 3

因此在更改检测期间使用更新元素属性的操作。

特殊语法 attr.*、class.* 和 style.* 定义了不同类型的绑定：

TypeElementAttribute = 1 << 0,
TypeElementClass = 1 << 1,
TypeElementStyle = 1 << 2,

因此在对每种类型的绑定进行更改检测期间使用相应的操作：

function CheckAndUpdateElement() {
    ...
    case BindingFlags.TypeElementAttribute -> setElementAttribute
    case BindingFlags.TypeElementClass     -> setElementClass
    case BindingFlags.TypeElementStyle     -> setElementStyle
    case BindingFlags.TypeProperty         -> setElementProperty;

要了解 Angular 与视图和绑定相关的内部信息，我强烈建议阅读：

由于在更改检测期间处理了所有绑定，因此另请阅读：

Everything you need to know about change detection in Angular

[class] [attr] [style] 指令如何工作

How [class] [attr] [style] directives work

angular2-directives

angular