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

Question

我在这里检查了ngStyle,ngClass指令,但我仍然无法理解这些是如何工作的:

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

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

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

Answer 1

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

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

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

<div [prop]="myAriaRole">

编译器TypeProperty为其创建绑定：

TypeProperty = 1 << 3

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

特殊语法attr.*, class.*andstyle.*定义了不同类型的绑定：

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 内部结构，我强烈建议阅读：

• Angular 中 DOM 更新的机制
• Angular 中的属性绑定更新机制
• 这就是为什么你不会在 Angular 中找到组件的原因

由于在更改检测期间处理所有绑定，因此还读取：

• 关于 Angular 中的变更检测你需要知道的一切