Que fait l'attribut "ng-reflect-*" dans Angular2/4 ?

Question

Ici, j'ai une structure de données complexe dans une application Angular4.

Il s'agit d'un multigraphe dirigé paramétré avec des dictionnaires à la fois sur les nœuds et sur les liens. Mes composants angulaires travaillent sur ce modèle de données complexe.

Dans Angular2.4, tout fonctionnait bien. Depuis que nous sommes passés à Angular4, je reçois ceci dans mon DOM :

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

...qui est généré à partir de l'extrait de modèle suivant :

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

Note, model est ici simplement un membre de données de mon composant. Il n'a pas (...ne devrait pas avoir) de signification spécifique à Angular2. Il fait partie de la structure de données complexe de mon application.

Ma première impression est qu'Angular sérialise le model de la classe composant, récupère ses 30 premiers caractères, puis place ce truc totalement inutile dans le DOM !

Est-ce que j'ai raison ? Qu'est-ce que tout ça ng-reflect-model dans le DOM, quel usage spécifique a-t-il dans Angular4 qu'il n'avait pas dans Angular2 ?

Answer 1

ng-reflect-${name} sont ajoutés à des fins de débogage et indiquent les liaisons d'entrée qu'un composant/directive a déclarées dans sa classe. Ainsi, si votre composant est déclaré comme ceci :

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

le html résultant sera rendu comme ceci :

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

Ils n'existent que lorsque le mode débogage est utilisé - mode par défaut pour Angular. Pour les désactiver, utilisez

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

enableProdMode();

à l'intérieur de main.ts fichier. Ces attributs sont ajoutés par cette fonction ici :

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