"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.

它是有向多参数图，在节点和链接上均带有字典，并带有字典.我的角度组件正在研究这个复杂的数据模型.

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屋！