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