“ng-reflect-*"是什么意思?属性在 Angular2/4 中做什么? [英] What does the "ng-reflect-*" attribute do in Angular2/4?

问题描述

这里我有一个 Angular4 应用程序中的复杂数据结构.

Here I have a complex data structure in an Angular4 application.

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

It is a directed multigraph parametrized with dictionaries both on nodes and on links. My angular components are working on this complex data model.

在 Angular2.4 中，一切正常.由于我们切换到 Angular4，我将其添加到我的 DOM 中:

In Angular2.4, everything worked fine. Since we switched to Angular4, I get this into my DOM:

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

...从以下模板片段生成:

...which is generated from the following template snippet:

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

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

Note, model is here simply a data member of my component. It has no (...should have no) specific Angular2 meaning. It is a part of the complex data structure behind my app.

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

My first impression is that Angular serializes the model data member of the component class, gets its 30 first characters, and then puts this totally useless thingy into the DOM!

我说得对吗?DOM 中的整个 ng-reflect-model 是什么，它在 Angular4 中有什么特定用途，而在 Angular2 中没有?

Am I right? What is this whole ng-reflect-model in the DOM, what specific purpose has it in Angular4 what it didn't have in Angular2?

推荐答案

ng-reflect-${name} 添加属性用于调试目的并显示组件/指令已声明的输入绑定在它的班级.所以如果你的组件是这样声明的:

ng-reflect-${name} attributes are added for debugging purposes and show the input bindings that a component/directive has declared in its class. So if your component is declared like this:

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

生成的 html 将呈现如下:

the resulting html will be rendered like this:

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

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

They exist only when debugging mode is used - default mode for Angular. To disable them, use

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

enableProdMode();

在 main.ts 文件中.这些属性是由此函数添加的:

inside main.ts file. These attributes are added by 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); <-----------------

这篇关于“ng-reflect-*"是什么意思?属性在 Angular2/4 中做什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！