[번역] Angular 속성 바인딩 업데이트 메커니즘 - Laravel/Angular 기술 공유

이 문서에서는 주로 angularjs 속성 바인딩 및 업데이트 메커니즘에 대해 설명하고, 이 문서의 모든 내용을 anglejs 업데이트 속성에 대해 자세히 설명합니다. 이제 이 문서를 함께 읽어보겠습니다.

angularjs 속성 바인딩 업데이트 메커니즘 설명:

모든 최신 프런트엔드 프레임워크는 구성 요소를 사용하여 UI를 합성합니다. 이는 자연스럽게 상위-하위 구성 요소 계층 구조를 초래하므로 프레임워크에서 상위-하위 구성 요소 통신을 위한 메커니즘을 제공해야 합니다. 마찬가지로 Angular는 상위-하위 구성 요소 통신을 구현하는 두 가지 방법인 입력 및 출력 바인딩과 공유 서비스도 제공합니다. 상태 비저장 프레젠테이션 구성 요소의 경우 입력 및 출력 바인딩 접근 방식을 선호하는 반면, 상태 저장 컨테이너 구성 요소의 경우 공유 서비스 접근 방식을 사용합니다.

이 글에서는 주로 입력 및 출력 바인딩 방법을 소개하며, 특히 상위 구성 요소의 입력 바인딩 값이 변경될 때 Angular가 하위 구성 요소의 입력 값을 업데이트하는 방법을 소개합니다. Angular가 현재 구성 요소 DOM을 업데이트하는 방법을 알고 싶다면 번역된 Angular DOM 업데이트 메커니즘을 확인하세요. 이 문서는 이 문서를 더 깊이 이해하는 데 도움이 될 것입니다. Angular가 DOM 요소 및 구성 요소의 입력 바인딩 속성을 업데이트하는 방법을 탐색할 예정이므로 구성 요소와 지시문이 Angular에서 내부적으로 어떻게 표현되는지 알고 있다고 가정합니다. 이에 대해 잘 모르고 관심이 있는 경우에는 할 수 있습니다. Angular가 내부적으로 Component를 찾지 못하는 이유 번역을 확인하세요. 이 기사에서는 주로 Angular가 지시문 형식을 사용하여 구성 요소를 표현하는 방법에 대해 설명합니다. Angular는 내부적으로 구성 요소를 명령으로 처리하므로 이 문서에서는 구성 요소와 명령이라는 두 가지 개념을 같은 의미로 사용합니다.

템플릿 바인딩 구문

Angular가 속성 바인딩 구문 - []을 제공한다는 것을 알고 계실 것입니다. 이 구문은 매우 일반적이며 하위 구성 요소 또는 기본 DOM 요소에서 사용할 수 있습니다. 상위 구성 요소에서 하위 구성 요소 b-comp 또는 기본 DOM 요소 span으로 데이터를 전달하려면 상위 구성 요소 템플릿에 다음과 같이 작성할 수 있습니다. []，这个语法很通用，它可以用在子组件上，也可以用在原生 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']}

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

기본 DOM 요소에 대해서는 추가 작업을 수행할 필요가 없지만 하위 구성 요소 b-comp에 대해서는 입력 속성 textContent를 선언해야 합니다.

{textContent: [0, 'textContent']}

This AText 속성이 변경되면 Angular는 하위 구성 요소의 BComponent.textContent 속성과 기본 요소의 span.textContent 속성입니다. 동시에 하위 구성요소 <code>BComponent의 수명 주기 후크 함수 ngOnChanges도 호출됩니다(참고: 실제로 ngDoCheck가 있습니다. 아래 참조). BComponent 및 span이 textContent 바인딩을 지원한다는 것을 Angular가 어떻게 아는지 궁금할 것입니다. 이는 Angular 컴파일러가 템플릿을 구문 분석할 때 span과 같은 간단한 DOM 요소를 발견하면 해당 요소가

dom_element_schema_registry에 정의되어 있는지 확인하여 HTMLElement 하위 클래스임을 알기 때문입니다. , textContent는 속성 중 하나입니다. (참고: span이 [abc]=AText에 바인딩된 경우 시도해 볼 수 있으며 오류는 다음과 같습니다. 보고되었으며 abc를 인식할 수 없습니다. 속성) 구성 요소나 지시어가 나타나면 해당 데코레이터 @Component/@Directive의 메타데이터 <code>input 속성을 ​​확인하세요. 에는 바인딩 속성 항목이 있습니다. 그렇지 않은 경우 컴파일러는 다음과 같은 오류를 발생시킵니다.

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

이 지식은 이해하기 쉽습니다. 이제 내부적으로 무슨 일이 일어나고 있는지 자세히 살펴보겠습니다. Component Factory

입력 속성은 하위 구성 요소 BComponent 및 span 요소에 바인딩되어 있지만 입력 바인딩 업데이트에 필요한 모든 정보는 상위 구성 요소 에 있습니다. AComponent의 구성요소 팩토리에 있습니다. AComponent의 구성 요소 팩토리 코드를 살펴보겠습니다. 🎜

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

🎜 🎜Translation Angular DOM 업데이트 메커니즘🎜 또는 🎜Translation Angular에서 구성 요소를 찾을 수 없는 이유🎜를 읽으면 각 내용을 이해할 수 있습니다. 위의 코드 뷰 노드가 더 친숙합니다. 처음 두 노드 중 jit_elementDef_2는 요소 노드이고 jit_directiveDef_5는 명령 노드입니다. 이 두 노드는 하위 구성 요소인 BComponent를 구성합니다. 세 번째 노드 jit_elementDef_2는 span 요소를 형성하는 요소 노드이기도 합니다. (자세한 내용을 알고 싶다면 PHP 중국어 웹사이트 AngularJS 개발 매뉴얼🎜을 방문하여 알아보세요)🎜

노드 바인딩🎜동일한 유형의 노드는 동일한 노드 정의 함수를 사용하지만 차이점은 jit_directiveDef_5와 같이 수신되는 매개변수가 다르다는 것입니다. 🎜

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

🎜그 중 {textContent: [0, 'textContent']} 매개변수는 🎜props🎜라고 합니다. 🎜directiveDef🎜 함수의 매개변수 목록을 볼 수 있습니다: 🎜

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

🎜 🎜props🎜 매개변수는 객체이고, 각 키는 바인딩 속성 이름이며, 값은 바인딩 인덱스와 바인딩 속성 이름으로 구성된 배열입니다. 예를 들어 이 예에는 바인딩이 🎜textContent🎜 하나만 있습니다. 해당 값은 다음과 같습니다. 🎜

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

🎜명령어에 다음과 같은 여러 바인딩이 있는 경우: 🎜

<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 函数主要功能如下：

1. 从当前视图节点里获取组件/指令对象

2. 检查组件/指令对象的绑定属性值是否发生改变

3. 如果属性发生改变：

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

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

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

   d. 调用生命周期钩子 ngOnChanges

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

5. 调用生命周期钩子 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!