Angular2/4에서 "ng-reflect-*" 속성은 무엇을 합니까?

Angular2/4에서 "ng-reflect-*" 속성은 무엇을 합니까?

여기 Angular4 애플리케이션의 복잡한 데이터 구조가 있습니다.

노드와 링크 모두에서 사전으로 매개변수화된 방향 다중 그래프입니다.저의 각진 구성요소들이 이 복잡한 데이터 모델에서 작동하고 있습니다.

Angular 2.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에 넣는다는 것입니다!

내 말이 맞니?이게 다야?ng-reflect-modelDOM에서 Angular2에 없었던 Angular4에는 어떤 구체적인 목적이 있습니까?

ng-reflect-${name}속성은 디버깅 목적으로 추가되며 구성 요소/구성 요소가 클래스에서 선언한 입력 바인딩을 표시합니다.따라서 구성 요소가 다음과 같이 선언된 경우:

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

결과 html은 다음과 같이 렌더링됩니다.

<a-component ng-reflect-data="..." ng-reflect-model="...">
   ...
<a-component>

각 모드의 기본 모드인 디버깅 모드가 사용되는 경우에만 존재합니다.사용하지 않으려면 다음을 사용합니다.

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

ng-reflect-속성은 모두 디버그 도우미로, 바인딩이 무엇인지 devtools에게 알려줍니다. 바인딩은 비디버깅(프로덕션) 모드에서는 존재하지 않습니다.

언급URL : https://stackoverflow.com/questions/43397839/what-does-the-ng-reflect-attribute-do-in-angular2-4