Что делает атрибут «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); <----------------- 
Interesting Posts
Давайте будем гением компьютера.