[譯] Angular 屬性綁定更新機制 - Laravel/Angular 技術分享-js教程-PHP中文網

本篇文章主要的講述了關於angularjs屬性綁定更新機制，還有angularjs更新屬性的詳解，都在這篇文章中，現在就讓我們一起來看這篇文章吧

angularjs屬性綁定更新機制解釋：

所有現代前端框架都是用元件來合成UI，這樣很自然就會產生父子元件層級，這就需要框架提供父子組件通訊的機制。同樣，Angular 也提供了兩種方式來實作父子元件通訊：輸入輸出綁定和共享服務。對於 stateless presentational components 我更喜歡輸入輸出綁定方式，然而對於 stateful container components 我使用共享服務方式。

本文主要介紹輸入輸出綁定方式，特別是當父元件輸入綁定值變化時，Angular 如何更新子元件輸入值。如果想了解 Angular 如何更新目前元件 DOM，可以查看 翻譯 Angular DOM 更新機制，這篇文章也會有助於加深對本文的理解。由於我們將探索Angular 如何更新DOM 元素和組件的輸入綁定屬性，所以假定你知道Angular 內部是如何表現組件和指令的，如果你不是很了解並且很感興趣，可以查看譯為何Angular 內部沒有發現元件，這篇文章主要講了Angular 內部如何使用指令形式來表示元件。而本文對於元件和指令兩個概念互換使用，因為 Angular 內部就是把元件當作指令。

模板綁定語法

你可能知道Angular 提供了屬性綁定語法 —— []，這個語法很通用，它可以用在子元件上，也可以用在原生DOM 元素上。如果你想從父元件把資料傳給子元件b-comp 或原生DOM 元件span，你可以在父元件範本中這麼寫：

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'a-comp',
  template: `
      <b-comp [textContent]="AText"></b-comp>
      <span [textContent]="AText"></span>
  `
})
export class AComponent {
  AText = 'some';
}

登入後複製

你不必為原生DOM 元素做些額外的工作，但是對於子元件b-comp 你需要申明輸入屬性textContent：

@Component({
    selector: 'b-comp',
    template: 'Comes from parent: {{textContent}}'
})
export class BComponent {
    @Input() textContent;
}

登入後複製

這樣當父元件AComponent.AText 屬性改變時，Angular 會自動更新子元件BComponent.textContent 屬性，和原生元素span.textContent 屬性。同時，也會呼叫子元件 BComponent 的生命週期鉤子函數 ngOnChanges（註：實際上還有 ngDoCheck，見下文）。

你可能好奇 Angular 是怎麼知道 BComponent 和 span 支援 textContent 綁定的。這是因為Angular 編譯器在解析模板時，如果遇到簡單DOM 元素如span，就去查找這個元素是否定義在dom_element_schema_registry，從而知道它是HTMLElement 子類， textContent 是其中的一個屬性（註：可以試試如果span 綁定一個[abc]=AText 就報錯，沒辦法識別abc 屬性）；如果遇到了元件或指令，就去查看其裝飾器@Component/@Directive 的元資料input 屬性裡是否有該綁定屬性項，如果沒有，編譯器同樣會拋出錯誤：

Can’t bind to ‘textContent’ since it isn’t a known property of …

登入後複製

這些知識都很好理解，現在讓我們進一步看看其內部發生了什麼。

元件工廠

儘管在子元件BComponent 和span 元素綁定了輸入屬性，但是輸入綁定更新所需的資訊全部在父元件AComponent 的元件工廠裡。讓我們看下AComponent 的元件工廠代碼：

function View_AComponent_0(_l) {
  return jit_viewDef1(0, [
     jit_elementDef_2(..., 'b-comp', ...),
     jit_directiveDef_5(..., jit_BComponent6, [], {
         textContent: [0, 'textContent']
     }, ...),
     jit_elementDef_2(..., 'span', [], [[8, 'textContent', 0]], ...)
  ], function (_ck, _v) {
     var _co = _v.component;
     var currVal_0 = _co.AText;
     var currVal_1 = 'd';
     _ck(_v, 1, 0, currVal_0, currVal_1);
  }, function (_ck, _v) {
     var _co = _v.component;
     var currVal_2 = _co.AText;
     _ck(_v, 2, 0, currVal_2);
  });
}

登入後複製

如果你讀了譯Angular DOM 更新機制 或譯為何Angular 內部沒有發現元件，就會對上面程式碼中的各個視圖節點比較熟悉了。在前兩個節點中，jit_elementDef_2 是元素節點，jit_directiveDef_5 是指令節點，這兩個組成了子元件BComponent；第三個節點 jit_elementDef_2 也是元素節點，組成了span 元素。（想看更多就到PHP中文網AngularJS開發手冊中學習）

節點綁定

#相同類型的節點使用相同的節點定義函數，但區別是接收的參數不同，例如jit_directiveDef_5 節點定義函數參數如下：

jit_directiveDef_5(..., jit_BComponent6, [], {
    textContent: [0, 'textContent']
}, ...),

登入後複製

其中，參數{textContent: [0, 'textContent']} 叫做props，這點可以查看directiveDef 函數的參數列表：

directiveDef(..., props?: {[name: string]: [number, string]}, ...)

登入後複製

props 參數是一個對象，每一個鍵為綁定屬性名，對應的值為綁定索引和綁定屬性名組成的數組，例如本例中只有一個綁定，textContent 對應的值為：

{textContent: [0, 'textContent']}

登入後複製

如果指令有多個綁定定，比如：

<b-comp [textContent]="AText" [otherProp]="AProp">

登入後複製

props 参数值也包含两个属性：

jit_directiveDef5(49152, null, 0, jit_BComponent6, [], {
    textContent: [0, 'textContent'],
    otherProp: [1, 'otherProp']
}, null),

登入後複製

Angular 会使用这些值来生成当前指令节点的 binding，从而生成当前视图的指令节点。在变更检测时，每一个 binding 决定 Angular 使用哪种操作来更新节点和提供上下文信息，绑定类型是通过 BindingFlags 设置的（注：每一个绑定定义是 BindingDef，它的属性 flags: BindingFlags 决定 Angular 该采取什么操作，比如 Class 型绑定和 Style 型绑定都会调用对应的操作函数，见下文）。比如，如果是属性绑定，编译器会设置绑定标志位为：

export const enum BindingFlags {
    TypeProperty = 1 << 3,

登入後複製

注：上文说完了指令定义函数的参数，下面说说元素定义函数的参数。

本例中，因为 span 元素有属性绑定，编译器会设置绑定参数为 [[8, 'textContent', 0]]：

jit_elementDef2(..., 'span', [], [[8, 'textContent', 0]], ...)

登入後複製

不同于指令节点，对元素节点来说，绑定参数结构是个二维数组，因为 span 元素只有一个绑定，所以它仅仅只有一个子数组。数组 [8, 'textContent', 0] 中第一个参数也同样是绑定标志位 BindingFlags，决定 Angular 应该采取什么类型操作（注：[8, 'textContent', 0] 中的 8 表示为 property 型绑定）：

export const enum BindingFlags {
    TypeProperty = 1 << 3, // 8

登入後複製

其他类型标志位已经在文章 译 Angular DOM 更新机制 有所解释：

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

登入後複製

编译器不会为指令定义提供绑定标志位，因为指令的绑定类型也只能是 BindingFlags.TypeProperty。

注：节点绑定 这一节主要讲的是对于元素节点来说，每一个节点的 binding 类型是由 BindingFlags 决定的；对于指令节点来说，每一个节点的 binding 类型只能是 BindingFlags.TypeProperty。

updateRenderer 和 updateDirectives

组件工厂代码里，编译器还为我们生成了两个函数：

function (_ck, _v) {
    var _co = _v.component;
    var currVal_0 = _co.AText;
    var currVal_1 = _co.AProp;
    _ck(_v, 1, 0, currVal_0, currVal_1);
},
function (_ck, _v) {
    var _co = _v.component;
    var currVal_2 = _co.AText;
    _ck(_v, 2, 0, currVal_2);
}

登入後複製

如果你读了 译 Angular DOM 更新机制，应该对第二个函数即 updateRenderer 有所熟悉。第一个函数叫做 updateDirectives。这两个函数都是 ViewUpdateFn 类型接口，两者都是视图定义的属性：

interface ViewDefinition {
  flags: ViewFlags;
  updateDirectives: ViewUpdateFn;
  updateRenderer: ViewUpdateFn;

登入後複製

有趣的是这两个函数的函数体基本相同，参数都是 _ck 和 _v，并且两个函数的对应参数都指向同一个对象，所以为何需要两个函数？

因为在变更检测期间，这是不同阶段的两个不同行为：

更新子组件的输入绑定属性
更新当前组件的 DOM 元素

这两个操作是在变更检测的不同阶段执行，所以 Angular 需要两个独立的函数分别在对应的阶段调用：

updateDirectives——变更检测的开始阶段被调用，来更新子组件的输入绑定属性
updateRenderer——变更检测的中间阶段被调用，来更新当前组件的 DOM 元素

这两个函数都会在 Angular 每次的变更检测时 被调用，并且函数参数也是在这时被传入的。让我们看看函数内部做了哪些工作。

_ck 就是 check 的缩写，其实就是函数 prodCheckAndUpdateNode，另一个参数就是 组件视图数据。函数的主要功能就是从组件对象里拿到绑定属性的当前值，然后和视图数据对象、视图节点索引等一起传入 prodCheckAndUpdateNode 函数。其中，因为 Angular 会更新每一个视图的 DOM，所以需要传入当前视图的索引。如果我们有两个 span 和两个组件：

<b-comp [textContent]="AText"></b-comp>
<b-comp [textContent]="AText"></b-comp>
<span [textContent]="AText"></span>
<span [textContent]="AText"></span>

登入後複製

编译器生成的 updateRenderer 函数和 updateDirectives 函数如下：

function(_ck, _v) {
    var _co = _v.component;
    var currVal_0 = _co.AText;
    
    // update first component
    _ck(_v, 1, 0, currVal_0);
    var currVal_1 = _co.AText;
    
    // update second component
    _ck(_v, 3, 0, currVal_1);
}, 
function(_ck, _v) {
    var _co = _v.component;
    var currVal_2 = _co.AText;
    
    // update first span
    _ck(_v, 4, 0, currVal_2);
    var currVal_3 = _co.AText;

    // update second span
    _ck(_v, 5, 0, currVal_3);
}

登入後複製

没有什么更复杂的东西，这两个函数还不是重点，重点是 _ck 函数，接着往下看。

更新元素的属性

从上文我们知道，编译器生成的 updateRenderer 函数会在每一次变更检测被调用，用来更新 DOM 元素的属性，并且其参数 _ck 就是函数 prodCheckAndUpdateNode。对于 DOM 元素的更新，该函数经过一系列的函数调用后，最终会调用函数 checkAndUpdateElementValue，这个函数会检查绑定标志位是 [attr.name, class.name, style.some] 其中的哪一个，又或者是属性绑定：

case BindingFlags.TypeElementAttribute -> setElementAttribute
case BindingFlags.TypeElementClass     -> setElementClass
case BindingFlags.TypeElementStyle     -> setElementStyle
case BindingFlags.TypeProperty         -> setElementProperty;

登入後複製

上面代码就是刚刚说的几个绑定类型，当绑定标志位是 BindingFlags.TypeProperty，会调用函数 setElementProperty，该函数内部也是通过调用 DOM Renderer 的 setProperty 方法来更新 DOM。

注：setElementProperty 函数里这行代码 view.renderer.setProperty(renderNode,name, renderValue);，renderer 就是 Renderer2 interface，它仅仅是一个接口，在浏览器平台下，它的实现就是 DefaultDomRenderer2。

更新指令的属性

上文中已经描述了 updateRenderer 函数是用来更新元素的属性，而 updateDirective 是用来更新子组件的输入绑定属性，并且变更检测期间传入的参数 _ck 就是函数 prodCheckAndUpdateNode。只是进过一系列函数调用后，最终调用的函数却是checkAndUpdateDirectiveInline，这是因为这次节点的标志位是 NodeFlags.TypeDirective

checkAndUpdateDirectiveInline 函数主要功能如下：

从当前视图节点里获取组件/指令对象
检查组件/指令对象的绑定属性值是否发生改变
如果属性发生改变：

a. 如果变更策略设置为 OnPush，设置视图状态为 checksEnabled

b. 更新子组件的绑定属性值

c. 准备 SimpleChange 数据和更新视图的 oldValues 属性，新值替换旧值

d. 调用生命周期钩子 ngOnChanges
如果该视图是首次执行变更检测，则调用生命周期钩子 ngOnInit
调用生命周期钩子 ngDoCheck

当然，只有在生命周期钩子在组件内定义了才被调用，Angular 使用 NodeDef 节点标志位来判断是否有生命周期钩子，如果查看源码你会发现类似如下代码：

if (... && (def.flags & NodeFlags.OnInit)) {
  directive.ngOnInit();
}
if (def.flags & NodeFlags.DoCheck) {
  directive.ngDoCheck();
}

登入後複製

和更新元素节点一样，更新指令时也同样把上一次的值存储在视图数据的属性 oldValues 里（注：即上面的 3.c 步骤）。

好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

以上是[譯] Angular 屬性綁定更新機制 - Laravel/Angular 技術分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

[譯] Angular 屬性綁定更新機制 - Laravel/Angular 技術分享

模板綁定語法

元件工廠

節點綁定

updateRenderer 和 updateDirectives

更新元素的属性

更新指令的属性