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 complejo modelo de datos.
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 model aquí es simplemente un miembro de datos de mi componente. No tiene (... no debería tener) 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 primeros 30 caracteres y luego coloca 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 que no tenía en Angular2?
Los 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>Existen solo 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); <-----------------