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

发布时间：2020-12-17 08:03:48 所属栏目：安全来源：网络整理

导读：在这里，我在Angular4应用程序中有一个复杂的数据结构。它是在节点和链路上使用字典进行参数化的有向多图。我的角度组件正在处理这个复杂的数据模型。在Angular2.4中，一切正常。自从我们切换到Angular4后，我将其添加到我的DOM中： g flareNode="" ng-ref

在这里，我在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); <-----------------

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!