简单的组件代码：import{Component}from'@angular/core';从'@angular/forms'导入{FormControl}；@Component({selector:'app-reactive-favorite-color',template:`FavoriteColor:`})exportclassReactFormComponent{favoriteColorControl=newFormControl('');}如下图：ng-reflect-form属性是如何在运行时生成的？bootstrap中调用_loadComponent:changeDetectorRefstrategy:RootViewRef:ComponentRef指向的AppComponent，可以看到Component的属性：loadComponent中显式调用tick:changedetectintickfunction:AngularComponenthtml中带方括号的指令，浏览器无法识别。在Angularcore.js中，执行Component模板实现函数时，会调用Angular的??property函数展开方括号包裹的Angular指令：Updateapropertyonaselectedelement.elementpointstoinputcontrol:required添加的属性名输入标签页为form:属性form在normalizeDebugBindingValue中经过正则化处理后，将返回值：ng-reflect-form写入输入ng-reflect-form属性：的值中，以避免value的value太复杂时，序列化生成的json字符床太大，污染了最终的原生html。在normalizeDebugBindingValue中，只需调用toString函数：//限制值的大小e否则DOM就会被污染。这就是我在Chrome开发者工具中看到的[objectObject]的由来：重要的takeawaysetNgReflectProperty函数。更多Jerry原创文章在这里：《王子熙》：
