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

问题描述

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

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

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

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

解决方案

你说得对，这些不是指令.

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

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

编译器为其创建 TypeProperty 绑定:

TypeProperty = 1 <<

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

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

TypeElementAttribute = 1 <<0,类型元素类 = 1 <<1、类型元素样式 = 1 <<2、

所以在变化检测期间对每种类型的绑定使用相应的操作:

function CheckAndUpdateElement() {...case BindingFlags.TypeElementAttribute ->设置元素属性case BindingFlags.TypeElementClass ->设置元素类case BindingFlags.TypeElementStyle ->设置元素样式case BindingFlags.TypeProperty ->设置元素属性；

要了解与视图和绑定相关的 Angular 内部结构，我强烈建议阅读:

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

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

• 您需要的一切了解 Angular 中的变更检测

I examined ngStyle, ngClass directives here but I still couldn't understand how these work:

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

Built-in directives don't select such an attribute: class.extra-sparkle. What kind of selector can select such html attribute? Which built-in directive handles this?

As far as I know html attributes with dot (style.width.px) are not legal already. Apparently the string withing square brackets don't passed directly as attributes. But where it is done? Which directive catches these notations?

解决方案

You're right, these are not directives.

Angular compiler creates a view factory for each component with view nodes. For each view node the compiler defines a set of bindings types using the bitmask. There are different binding types and hence different types of operations performed during change detection to reflect changes in the component class.

You probably know about the standard input mechanism that allows updating the property:

<div [prop]="myAriaRole">

The compiler creates the TypeProperty binding for it:

TypeProperty = 1 << 3

and hence the operation to update the element property is used during change detection.

The special syntax attr.*, class.* and style.* defines different type of bindings:

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

so during change detection for each type of binding corresponding operation is used:

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

To learn about Angular internals related to view and bindings I strongly recommend reading:

• 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

Since all bindings are processed during change detection also read:

• Everything you need to know about change detection in Angular

这篇关于[class] [attr] [style] 指令如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！