Angular2/4の "ng-reflect-*"属性は何をするのですか？

質問

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 は、Angular2にはなかったものですが、Angular4ではどのような特定の目的を持っているのでしょうか？

どのように解決するのですか？

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