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

angular wikipedia

Question

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 funcionó 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>

Tenga en cuenta que el model aquí es simplemente un miembro de datos de mi componente. No tiene (... no debería tener) un significado específico de Angular2. Es 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 del model de la clase de componente, obtiene sus 30 primeros caracteres y luego coloca esta cosa totalmente inútil en el DOM.

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

Answer 1

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

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

el html resultante se representará así:

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