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

Question

我检查了 ngStyle、ngClass 指令 here但我仍然不明白这些是如何工作的:

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

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

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

Answer 1

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

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

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

<div [prop]="myAriaRole">

编译器为其创建 TypeProperty 绑定(bind):

TypeProperty = 1 << 3

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

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

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

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

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

要了解与 View 和绑定(bind)相关的 Angular 内部机制，我强烈建议阅读:

• The mechanics of DOM updates in Angular
• The mechanics of property bindings update in Angular
• Here is why you will not find components inside Angular

由于在更改检测期间处理了所有绑定(bind)，因此还读取:

• Everything you need to know about change detection in Angular