Question

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

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

内置指令不选择这样的属性：class.extra-sparkle。什么样的selector可以选择这样的html属性？哪个内置指令处理这个？

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

Answer 1

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

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

您可能知道允许更新属性的标准输入机制：

<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

Answer 2

_{以下代码片段摘自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的{{1}}除外。）

true

这是一个Stackblitz demo供你玩。：）

Answer 3

当@Edric指定here时，问题就是绑定目标。我首先认为所有这些都是由内置指令

处理的

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

喜欢ngClass和ngStyle，但事实并非如此。这些都不是指令，它们只是这个的同义词：

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

并且绑定前缀在模板解析器here中编译。＆＃34;绑定事物＆＃34;不是指令，it is build-in feature that compiler already handles all the bound properties, attributes etc。

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

3 个答案: