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

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

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

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

 

… который генерируется из следующего fragmentа шаблона:

  

Обратите внимание: model здесь просто является членом данных моего компонента. Он не имеет (… не должен иметь) конкретного значения Angular2. Это часть сложной структуры данных за моим приложением.

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

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

Атрибуты ng-reflect-${name} добавляются для целей отладки и показывают привязки ввода, которые компонент / директива объявила в своем classе. Поэтому, если ваш компонент объявлен следующим образом:

 class AComponent { @Input() data; @Input() model; } 

полученный html будет отображаться следующим образом:

  ...  

Они существуют только при использовании режима отладки – режим по умолчанию для Углового. Чтобы отключить их, используйте

 import {enableProdMode} from '@angular/core'; enableProdMode(); 

внутри main.ts файл. Эти атрибуты добавляются этой функцией здесь :

 function debugCheckAndUpdateNode(...): void { const changed = (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); <----------------- 
  • Как программно создавать и применять директивы?
  • Угловое 2: получение RouteParams из родительского компонента
  • Как динамически добавлять и удалять поля формы в Angular 2
  • angular2 resolveAndCreate HTTP - отсутствует HTTP_PROVIDERS в RC7
  • Угловая форма 2 для проверки пароля повторения
  • Маршрут Angular 2's Router нарушен при использовании маршрутов HTML5?
  • Angularjs препятствуют отправке формы при неудачной проверке ввода
  • Местоположение и HashLocationStrategy перестали работать в бета-версии.16.
  • Угловое ИСКЛЮЧЕНИЕ: Нет провайдера Http
  • Соединение плоских данных
  • Как я могу ограничить повторение ngFor некоторым количеством элементов в Angular?
  • Interesting Posts

    jQuery UI: Как изменить цвет ProgressBar?

    Как подключить два компьютера к одному монитору

    Принудительное HTTPS для определенного URL-адреса

    Преобразование времени UTC / GMT в местное время

    Удаление дублированных строк

    Где Скала ищет неявки?

    Вызов метода активности из адаптера

    Обманите приложение, думая, что его выступление – это терминал, а не труба

    Android: OutofMemoryError: размер растрового изображения превышает бюджет VM без причины, я могу видеть

    Android: обратное геокодирование – getFromLocation

    Редактирование столбцов в Notepad ++ является удивительным. Как копировать / вставлять в режиме столбцов?

    Что такое минимальное и максимальное состояние процессора в Windows 7 Power Management?

    Cygwin Mintty unicode не отображается неудачно, несмотря на то, что dejavu sans mono и все

    Вставка в вектор спереди

    Является ли это плохой практикой, чтобы поймать неспецифическое исключение, такое как System.Exception? Зачем?

    Давайте будем гением компьютера.