Angular2/4 中的“ng-reflect-*”属性有什么作用？

Question

我在 Angular4 应用程序中有一个复杂的数据结构。

它是一个在节点和链接上都使用字典参数化的有向多重图。我的 Angular 组件正在处理这个复杂的数据模型。

在 Angular2.4 中，一切正常。自从我们切换到 Angular4 后，我把它放到了我的 DOM 中：

<g flareNode="" ng-reflect-model="{'id':'an-id-of-my-object'">

...由以下模板 sn-p 生成：

<svg:g flareNode [model]="item"></svg:g>

注意，model 在这里只是我组件的一个数据成员。它没有（...应该没有）特定的 Angular2 含义。它是我的应用背后复杂数据结构的一部分。

我的第一印象是 Angular序列化组件类的 model 数据成员，获取它的前 30 个字符，然后将这个完全没用的东西放入 DOM！

我说的对吗？ DOM 中的整个 ng-reflect-model 是什么，它在 Angular4 中有什么具体用途，而在 Angular2 中没有？

Answer 1

ng-reflect-${name} 属性被添加用于调试目的，并显示组件/指令在其类中声明的输入绑定。所以如果你的组件是这样声明的：

class AComponent {
  @Input() data;
  @Input() model;
}

生成的 html 将呈现如下：

<a-component ng-reflect-data="..." ng-reflect-model="...">
   ...
<a-component>

它们仅在使用调试模式时存在 - Angular 的默认模式。要禁用它们，请使用

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

enableProdMode();

在main.ts 文件中。这些属性是this function here添加的：

function debugCheckAndUpdateNode(...): void {
  const changed = (<any>checkAndUpdateNode)(view, nodeDef, argStyle, ...givenValues);
  if (changed) {
    const values = argStyle === ArgumentType.Dynamic ? givenValues[0] : givenValues;
    if (nodeDef.flags & NodeFlags.TypeDirective) {
      const bindingValues: {[key: string]: string} = {};
      for (let i = 0; i < nodeDef.bindings.length; i++) {
        const binding = nodeDef.bindings[i];
        const value = values[i];
        if (binding.flags & BindingFlags.TypeProperty) {
          bindingValues[normalizeDebugBindingName(binding.nonMinifiedName !)] =
              normalizeDebugBindingValue(value); <------------------
        }
      }

    ...

    for (let attr in bindingValues) {
      const value = bindingValues[attr];
      if (value != null) {
        view.renderer.setAttribute(el, attr, value); <-----------------