Что делает атрибут "ng-reflect- *" в Angular2/4?

Здесь у меня сложная структура данных в приложении Angular4.

Это направленная мультиграфия, параметризованная словарями как на узлах, так и на ссылках. Мои компоненты angular работают над этой сложной моделью данных.

В Angular2.4 все работало нормально. Поскольку мы перешли на Angular4, я получаю это в свой DOM:

..., который генерируется из следующего фрагмента шаблона:

Примечание. model здесь просто элемент данных моего компонента. Он не имеет (... не должен иметь) специфического значения Angular2. Это часть сложной структуры данных за моим приложением.

Мое первое впечатление о том, что angular сериализует член данных model класса компонентов, получает его 30 первых символов, а затем помещает эту абсолютно бесполезную вещь в DOM!

Я прав? Что это за ng-reflect-model в DOM, какая конкретная цель имеет его в Angular4, чего у него не было в Angular2?

Ответы

Ответ 1

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