Angular2/4中的“ ng-response-*”属性有什么作用？

这里我有一个复杂的数据结构在 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含义。它是我的应用程序背后复杂数据结构的一部分。

我的第一印象是角 序列化组件类的 model数据成员，获取它的前30个字符，然后将这个完全无用的东西放入 DOM！

我说的对吗？这整个 ng-reflect-model在 DOM 中是什么? 它在 Angular4中有什么特殊的用途? 它在 Angular2中没有什么？

140537 次浏览
小开
最佳答案

添加 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();

这些属性是由 这个函数添加的:

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

提交答案