在这里,我在Angular4应用程序中有一个复杂的数据结构。
它是在节点和链路上使用字典进行参数化的有向多图。我的角度组件正在处理这个复杂的数据模型。
在Angular2.4中,一切正常。自从我们切换到Angular4后,我将其添加到我的DOM中:
<g flareNode="" ng-reflect-model="{'id':'an-id-of-my-object'">
…从以下模板片段生成:
<svg:g flareNode [model]="item"></svg:g>
注意,model只是我组件的数据成员。它没有(……应该没有)特定的Angular2含义。它是我的应用程序背后的复杂数据结构的一部分。
我的第一印象是Angular序列化了组件类的模型数据成员,得到了它的30个第一个字符,然后将这个完全没用的东西放到了DOM中!
我对吗? DOM中的整个ng-reflect模型是什么,Angular4中它在Angular2中没有的具体目的是什么?
ng-reflect – $ {name}属性被添加用于调试目的,并显示组件/指令在其类中声明的输入绑定。因此,如果您的组件声明如下:
class AComponent { @Input() data; @Input() model; }
生成的html将呈现如下:
<a-component ng-reflect-data="..." ng-reflect-model="..."> ... <a-component>
它们仅在使用调试模式时存在 – Angular的默认模式。要禁用它们,请使用
import {enableProdMode} from '@angular/core'; enableProdMode();
在main.ts文件中。这些属性由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); <-----------------