[(n型号)]拆分

[(n型号)]将[]输入()输出组合起来，进行双向数据绑定。拆分开来

输入属性[n个型号](n个型号变更)输出监听元素值的变化，并同步查看值与模型值。复制代码代码如下：输入类型=' text ' id='模型内部'[ngModel]=' model '(ngModelChange)=' getModelChange($ event)'

型号：字符串；构造函数(){ this . model=' model init } GetModelChange(事件：字符串){ this。模型=事件；//查看值与模型值同步}自定义组件上使用[(n型号)]

我们不能把[(n型号)]用到非表单类的原生元素或第三方自定义组件上，除非写一个合适的值访问器，这种技巧超出了本章的范围棱角分明。文档中描述到这里，就中止了。刚好我要定制一个模拟收音机的组件，只能如文档所说，依葫芦画瓢实现控制值访问器。

控制值访问器接口

控制值访问器充当角形应用编程接口和数字正射影像图中本机元素之间的桥梁。如果您想要创建与有角的窗体集成的自定义窗体控件指令，请实现此接口。简而言之，实现了这个接口的组件，就可以使用角形美国石油学会，比如[(n型号)]。

接口ControlValueAccessor { write value(obj : any): void registoronchange(fn : any): void registorontouched(fn : any): void setdisablestate(is disabled : boolean)？ void}实现控制值访问器步骤

模仿灌注中的自定义收音机组件，写了一个简单的自定义收音机组件。

创建一个无线电值存取器常量用来在组件中注册天然气价值存取器实现控制值访问器中的3 1个方法完整演示代码如下：

从“@棱角分明/核心”导入{模块、组件、输入、输出、ElementRef、OnInit、EventEmitter、forwardRef、ViewChild、change dectorref }；从" @棱角分明/普通"导入{公共模块}；从" @角形/形状"导入{ NG_VALUE_ACCESSOR，控制值ACCESSOR }；const RADIO _ VALUE _ ACCESSOR : any={提供： NG _ VALUE _ ACCESSOR，use exist : forward ref(()=PRadioComponent)，multi : true }；@ Component({选择器： ' app-p-radio '，模板： ' div class=' p-radio ' label class=' radio-label '(单击)=' select()' * Ngif=' label ' div class=' name '[class。选中-名称]=' Rb。选中了“{ label } }/div/label div class=' helper-hidden-accessible ' input # Rb type=' radio '[attr]。name]=' name '[attr。value]=' value '[checked]=' checked '/div class/p-RAdio。组件。SCS ']，提供程序：[RADIO _ VALUE _ ACCESSOR]})导出类PRadioComponent实现ControlValueAccessor { @ Input()名称：字符串；@Input()标签:字符串；@Input()值：字符串；已检查：布尔值；@ view child(' Rb ')inputview child :元素ref@ Output()prad ochange : event emitterany=new event emitter()；onmodel change : Function=()={ }；构造函数(私人CD : changeddetectorref){ }//模型视图-视图值WriteValue(值： any): void { if(值){ this。选中=(值===这个。值)；如果(这个。inputview子级。原生元素){ this。inputview子级。原生元素。选中=这个。已检查；}这个。光盘。MarkForCheck()；} } //视图值-模型值registoronchange(fn : Function): void { this。onmodelchange=fn} registorontouched(fn : Function): void { } handleClick(){ this。select()；}选择(){这个。inputview子级。原生元素。选中=！这个。inputview子级。原生元素。已检查；this.checked=！这个。选中){这个。OnMoDElChange(这。值)；//同步查看值和模型值} else { this。OnMoDElChange(null)；}这个。PrAdochange。emit(null)；} } @ ng模块({导入s :[公共模块]，导出s 3360[PRadioComponent]，声明：[PrAdocomponent])导出类RadioButtonModule { }方法何时被调用？

写值(obj : any): void

应用程序接口中提到（模型视图)时，writeValue()会被调用模型值和查看值分别指什么？举个调用PRadioComponent的例子：

复制代码代码如下： app-p-radio[value]=' 1 ' '[label]=' text 1 ' '[(ng型号)]=' CheckEdvalue '/app-p-radio

这里检查值属性就是模型值、视图值为PRadioComponent内部的某个属性(PRadioComponent中定义为这个值)。

当模型视图（检查值)发生改变时，PRadioComponent中的writeValue(obj: any)就会被调用，参数为当前模型值（检查值)的值，在函数中将参数值赋给内部的查看值，从而实现（模型视图).接受到模型值的值后，改变PRadioComponent的用户界面显示。

registoronchange(fn : any): void

这个方法的作用是同步查看值和模型值（视图-模型),

registoronchange(fn : Function): void { this。onmodelchange=fn}调用this.onModelChange()时候，将查看值当作参数传入此方法中，即完成了同步，此例子中这个。OnMoDElChange(这。值)；

上面两种方法是相对的：

writeValue(obj: any):模型值发生改变，完成后用户界面发生改变（模型值-视图值)registoronchange(fn : any):触发事件（比如单击),查看值和用户界面发生改变，完成调用后模型值与查看值同步（视图值-模型值)RegisteronTouched(fn : any): void

setdisablestate(Isdisabled :布尔值)?无效

目的只为在控件中简单的使用[(n型号)]，所以这两个方法没有用到registerOnTouched(fn: any)必须实现，所以定义了一个空函数。

实际效果

初始值为“A”。单击“更改视图值”，该值将在语言调试工具中更改为“B”。然后，在调试工具中，checkedValue被更改为“a”，视图也发生了变化。可见数据的双向绑定完成了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。