在这里,我在Angular4应用程序中具有复杂的数据结构。
这是一个有向的多编码,均以节点和链接上的字典参数为参数。我的angular度组件正在处理这个复杂的数据模型。
在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度序列化model
组件类的数据成员,获得30个第一个字符,然后将此完全无用的东西放入DOM!
我对吗?这是什么ng-reflect-model
在DOM中,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
文件。这些属性由此功能在这里:
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); <-----------------