[Übersetzung] Mechanismus zur Aktualisierung der Angular-Eigenschaftsbindung – gemeinsame Nutzung der Laravel/Angular-Technologie

In diesem Artikel geht es hauptsächlich um den AngularJS-Attributbindungsaktualisierungsmechanismus sowie um die ausführliche Erläuterung der AngularJS-Aktualisierungsattribute, die alle in diesem Artikel enthalten sind

Erklärung des Mechanismus zur Aktualisierung der AngularJS-Attributbindung:

Alle modernen Front-End-Frameworks verwenden Komponenten zur Synthese der Benutzeroberfläche, was natürlich zu einer Hierarchie von Eltern-Kind-Komponenten führt erfordert, dass das Framework einen Mechanismus für die Kommunikation zwischen Eltern-Kind-Komponenten bereitstellt. In ähnlicher Weise bietet Angular auch zwei Möglichkeiten zur Implementierung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten: Eingabe- und Ausgabebindung und Gemeinsamer Dienst. Für zustandslose Präsentationskomponenten bevorzuge ich den Eingabe- und Ausgabebindungsansatz, während ich für zustandsbehaftete Containerkomponenten den Shared-Services-Ansatz verwende.

In diesem Artikel werden hauptsächlich die Eingabe- und Ausgabebindungsmethoden vorgestellt, insbesondere wie Angular den Eingabewert der untergeordneten Komponente aktualisiert, wenn sich der Eingabebindungswert der übergeordneten Komponente ändert. Wenn Sie wissen möchten, wie Angular das aktuelle Komponenten-DOM aktualisiert, können Sie sich den Translated Angular DOM Update Mechanism> ansehen. Dieser Artikel wird Ihnen auch dabei helfen, Ihr Verständnis dieses Artikels zu vertiefen. Da wir untersuchen werden, wie Angular die Eingabebindungseigenschaften von DOM-Elementen und -Komponenten aktualisiert, wird davon ausgegangen, dass Sie wissen, wie Komponenten und Anweisungen in Angular intern dargestellt werden. Wenn Sie nicht viel darüber wissen und interessiert sind, können Sie sich Übersetzt, warum Angular intern keine Komponente gefunden wurde. In diesem Artikel geht es hauptsächlich darum, wie Angular Anweisungen zur internen Darstellung von Komponenten verwendet. In diesem Artikel werden die beiden Konzepte „Komponenten“ und „Anweisungen“ synonym verwendet, da Angular Komponenten intern als Anweisungen behandelt.

Vorlagenbindungssyntax

Sie wissen vielleicht, dass Angular

Eigenschaftsbindungssyntax —— bereitstellt. Diese Syntax ist sehr verbreitet und kann für untergeordnete Komponenten verwendet werden kann auch für native DOM-Elemente verwendet werden. Wenn Sie Daten von einer übergeordneten Komponente an eine untergeordnete Komponente [] oder ein natives DOM-Element b-comp übergeben möchten, können Sie dies in die Vorlage für die übergeordnete Komponente schreiben: span

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

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

Das ist nicht erforderlich alles Extra für native DOM-Elemente Funktioniert, aber für die untergeordnete Komponente

müssen Sie das Eingabeattribut b-comp deklarieren: textContent

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

, damit Angular automatisch aktualisiert wird, wenn sich das

-Attribut der übergeordneten Komponente ändert das Attribut AComponent.AText der untergeordneten Komponente und die Eigenschaften des nativen Elements BComponent.textContent. Gleichzeitig wird auch die Lebenszyklus-Hook-Funktion span.textContent der Unterkomponente BComponent aufgerufen (Hinweis: Es gibt tatsächlich ngOnChanges, siehe unten). ngDoCheck

Sie fragen sich vielleicht, woher Angular weiß, dass

und BComponent die Bindung span unterstützen. Dies liegt daran, dass der Angular-Compiler beim Parsen der Vorlage auf ein einfaches DOM-Element wie textContent stößt und herausfindet, ob das Element in spandom_element_schema_registry definiert ist, wodurch er weiß, dass es sich um eine HTMLElement-Unterklasse handelt und ist eines der Attribute (Hinweis: Sie können es versuchen, wenn textContent an ein span gebunden ist und ein Fehler gemeldet wird und das [abc]=AText-Attribut nicht erkannt werden kann); oder Direktive, überprüfen Sie das Element seines Dekorators abc Verfügt das Datenattribut @Component/@Directive über dieses Bindungsattributelement? Wenn nicht, gibt der Compiler auch einen Fehler aus: input

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

Dieses Wissen ist leicht zu verstehen. Schauen wir uns nun genauer an, was darin passiert.

Komponentenfabrik

Obwohl Eingabeattribute an die Elemente

und BComponent der untergeordneten Komponente gebunden sind, befinden sich alle für die Aktualisierung der Eingabebindung erforderlichen Informationen in der Komponente der übergeordneten Komponente span In der Fabrik. Werfen wir einen Blick auf den Komponenten-Factory-Code von 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);
  });
}

Wenn Sie

Translated Angular DOM Update Mechanism oder Translated Why Component in Angular nicht gefunden haben Dann werden Sie mit jedem Ansichtsknoten im obigen Code besser vertraut. Unter den ersten beiden Knoten ist ein Elementknoten und jit_elementDef_2 ein Anweisungsknoten. Diese beiden bilden die Unterkomponente jit_directiveDef_5; der dritte Knoten BComponent ist ebenfalls ein Elementknoten und bildet den jit_elementDef_2 Element. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website spanAngularJS Development Manual , um mehr zu erfahren.)

Knotenbindung

Knoten desselben Typs verwenden dieselbe Knotendefinition Funktion, aber die Unterschiede Die empfangenen Parameter sind unterschiedlich. Die Parameter der Knotendefinitionsfunktion

lauten beispielsweise wie folgt: jit_directiveDef_5

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

Unter ihnen heißt der Parameter

{textContent: [0, 'textContent']}props. Sie können die Funktion directiveDef überprüfen:

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

props Der Parameter ist ein Objekt, jeder Schlüssel ist der Name des Bindungsattributs Der entsprechende Wert ist ein Array, das aus dem Bindungsindex und dem Namen des Bindungsattributs besteht, z. B. wie folgt: Im Beispiel gibt es nur eine Bindung. Der entsprechende Wert von textContent lautet:

{textContent: [0, 'textContent']}

Wenn die Anweisung mehrere Bindungen hat, wie zum Beispiel:

<b-comp></b-comp>

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 <blockquote>注：上文说完了指令定义函数的参数，下面说说元素定义函数的参数。</blockquote><p>本例中，因为 <code>span</code> 元素有属性绑定，编译器会设置绑定参数为 <code>[[8, 'textContent', 0]]</code>：</p><pre class="brush:php;toolbar:false">jit_elementDef2(..., 'span', [], [[8, 'textContent', 0]], ...)

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

export const enum BindingFlags {
    TypeProperty = 1 <p>其他类型标志位已经在文章 <strong>译 Angular DOM 更新机制</strong> 有所解释：</p><pre class="brush:php;toolbar:false">TypeElementAttribute = 1 <p>编译器不会为指令定义提供绑定标志位，因为指令的绑定类型也只能是 <code>BindingFlags.TypeProperty</code>。</p><blockquote>注：<strong>节点绑定</strong> 这一节主要讲的是对于元素节点来说，每一个节点的 <strong>binding</strong> 类型是由 <strong>BindingFlags</strong> 决定的；对于指令节点来说，每一个节点的 <strong>binding</strong> 类型只能是 <code>BindingFlags.TypeProperty</code>。</blockquote><h2 id="updateRenderer-和-updateDirectives">updateRenderer 和 updateDirectives</h2><p>组件工厂代码里，编译器还为我们生成了两个函数：</p><pre class="brush:php;toolbar:false">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></b-comp>
<b-comp></b-comp>

编译器生成的 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使用手册中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt von[Übersetzung] Mechanismus zur Aktualisierung der Angular-Eigenschaftsbindung – gemeinsame Nutzung der Laravel/Angular-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!