关于angular:Angular-form控件原生HTML代码里ngreflectform属性和其值的生成时机

35次阅读

共计 1037 个字符，预计需要花费 3 分钟才能阅读完成。

简略的 Component 代码：

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class ReactFormComponent {favoriteColorControl = new FormControl('');
}

如下图所示：ng-reflect-form 这个属性运行时是如何生成的？

bootstrap 里调用_loadComponent：

changeDetectorRef 的策略：RootViewRef：

ComponentRef 指向的 AppComponent，能看到 Component 的 property：

loadComponent 里显式调用 tick：

tick 函数里进行 change detect：

Angular Component html 里加了方括号的 Directive，浏览器是无奈辨认的，在 Angular core.js 里，在执行 Component template 实现函数时，会调用 Angular 的ɵɵproperty 函数，将中括号包裹的 Angular 指令开展：Update a property on a selected element.

element 指向 input 控件：

须要增加到 input 标签页的属性名称为 form:

通过 normalizeDebugBindingValue 外面的正则化解决完属性 form 之后，返回的值：

ng-reflect-form

待写入 input ng-reflect-form 属性的值：

为了防止 value 的值过于简单时，序列化生成的 json 字符床过大，净化了最初的原生 html，在 normalizeDebugBindingValue 里只是简略的调用 toString 函数：
// Limit the size of the value as otherwise the DOM just gets polluted.

这就是最初在 Chrome 开发者工具里看到的 [object Object] 的由来：

setNgReflectProperty 函数

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

正文完