¿Qué hace el atributo" ng-reflect -* " en Angular2/4?

Question

¿Qué hace el atributo" ng-reflect -* " en Angular2/4?

Aquí tengo una estructura de datos compleja en una aplicación Angular4.

Es un multigrafo dirigido parametrizado con diccionarios tanto en nodos como en enlaces. Mis componentes angulares están trabajando en este modelo de datos complejo.

En Angular2. 4, todo funcionaba bien. Desde que cambiamos a Angular4, obtengo esto en mi DOM:

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

...que se genera a partir del siguiente fragmento de plantilla:

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

Nota, model es aquí simplemente un miembro de datos de mi componente. Tiene no (...no debe tener un significado angular2 específico. Es una parte de la compleja estructura de datos detrás de mi aplicación.

Mi primera impresión es que Angular serializa el miembro de datos model de la clase component, obtiene sus 30 primeros caracteres, y luego pone esta cosa totalmente inútil en el DOM!

¿Tengo razón? ¿Qué es todo este ng-reflect-model en el DOM, qué propósito específico tiene en Angular4 lo que no tenía en Angular2?

28

angular

Author: Max Wizard K, 2017-04-13

Source

1 answers

score 46 · Accepted Answer

ng-reflect-${name} los atributos se agregan con fines de depuración y muestran los enlaces de entrada que un componente / directiva ha declarado en su clase. Así que si tu componente se declara así:

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

El html resultante se renderizará de la siguiente manera:

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

Solo existen cuando se usa el modo de depuración - modo predeterminado para Angular. Para deshabilitarlos, use

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

enableProdMode();

Dentro del archivo main.ts. Estos atributos se agregan por esta función aquí :

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); <-----------------