利用angular4自定义组件的非输入元素实现ngModel双向数据绑定的方法

在angular中，我们通常会在输入元素中添加[(ngModel)]='value '，实现双向数据绑定。想在自定义组件上实现ngModel的双向数据绑定，应该怎么做？

我在网上搜了一下，没看懂就录了下来。

场景：组件可以通过ngModel获取父组件绑定的值，也可以通过ngModel更改父组件对应的数据。以下代码：

app-child[(ng model)]=' app data '/app-child 1，先发布渲染图：

2.以下是app-child组件的代码：

从“@angular/core”导入{ Component，forward ref }；从“@angular/forms”导入{ ControlValueAccessor，NG _ VALUE _ ACCESSOR }；@ Component({ selector : ' app-child '，templateUrl: '。/child.component.html '，styleurls 3360[]。/child.component.css']，providers :[{ provider : NG _ VALUE _ ACCESSOR，useexist : forward ref(()=ChildComponent)，multi: true }]})导出类child component实现controlvalue ACCESSOR { constructor(){ } _ data : any；add(){ this . child data；} change=(value : any)={ }；//首先定义一个方法是非常重要的，这个方法用来接收registerOnChange()方法传回来的方法，然后通过这个方法可以通知外部组件数据更新。set child data(value : number){//child data已更改为不使用此方法。_ data=值；改变(这个。_数据)；//将更新后的数据通知给外部组件} get childData() {//如果页面或方法中有对childData的调用，方法会返回这个。_数据；} writeValue(val): void {//初始化时，获取并监视数据if (val) {this。_data=父组件通过ngModel传入的val}}注册onchange(fn : any): void {//初始化后，执行此方法并保存函数this.change=fn在控件收到change事件后调用；} registerontouched(fn : any): void { } } 3。让我们从实现过程开始：

如果添加ngModel后报告以下错误，请检查组件对应的模块文件是否已导入FormsModule

从“@angular/forms”导入{ forms module }；在@ ngmodule ({之后.进口： [.表单模块]，})导入表单模块时，控制台仍会报告一个错误：

这是因为我们需要使用ngModel在组件中实现ControlValueAccessor的接口方法。

介绍并使用我们必须首先使用的配置：

从“@angular/core”导入{ Component，forward ref }；从“@angular/forms”导入{ ControlValueAccessor，NG _ VALUE _ ACCESSOR }；@ Component({ selector : ' app-child '，templateUrl: '。/child.component.html '，styleurls 3360[]。/child.component.css']，providers :[{ provider : NG _ VALUE _ ACCESSOR，useexists : forward ref(()=child component)，//此处组件的名称是当前组件的名称：multi:true}]})导出类子组件实现控制VALUE ACCESSOR { constructor(){ } child data=2；}处理完成后，控制台的错误消息已更改：

这是因为ControlValueAccessor的接口有几个必须存在并将被自动调用的方法：

WriteValue(val): void { } register on change(fn : any): void { } registerontouched(fn : any): void { }通过调用write value()方法进行初始化，表单模型中对应的初始值将用作参数(即ngModel中的值)。RegisterOnChange()可用于通知外部组件已更改。registerOnTouched()方法用于设置当控件接收到触摸事件时要调用的函数。知道了这三个方法，我们就可以在writeValue方法中为组件设置父组件通过ngModel传递的值。例如：

write value(val): void { if(val){ this . child data=val；}}那么如何将组件中的更新数据传递给父组件呢？

在register on change(fn : any): void {//初始化后执行此方法，并将函数this.change=fn保存在控件收到change事件后调用；}在使用了}writeValue()方法之后，将会执行registerOnChange()方法，我们通过这个方法传回来的方法参数通知外部组件数据更新，所以我们需要在开始的时候定义一个方法来接收它。

change=(value : any)={ }；//首先定义一个方法是非常重要的，这个方法用来接收registerOnChange()方法传回来的方法，然后通过这个方法可以通知外部组件数据更新。然后，您可以通过变更方法通知外部组件

set child data(value : number){//child data已更改为不使用此方法。_ data=值；改变(这个。_数据)；//将更新的数据通知给外部组件}第一个发布的代码使用set和get来处理数据。当在get childData()方法中找到断点时，将多次执行此方法。实际上，也可以修改为在更新数据时直接调用change()方法，通知外部组件数据更新，如下所示：

从“@angular/core”导入{ Component，forward ref }；从“@angular/forms”导入{ ControlValueAccessor，NG _ VALUE _ ACCESSOR }；@ Component({ selector : ' app-child '，templateUrl: '。/child.component.html '，styleurls 3360[]。/child.component.css']，providers :[{ provider : NG _ VALUE _ ACCESSOR，useexist : forward ref(()=ChildComponent)，multi: true }]})导出类child component实现controlvalue ACCESSOR { constructor(){ } _ data : any；child data=1；add(){ this . child data；this . change(this . child data)；} change=(value : any)={ }；//首先定义一个方法是非常重要的，这个方法是用来接收registerOnChange()方法传回来的方法，然后通过这个方法可以通知外部组件数据更新。WriteValue(val): void {//初始化时，获取并侦听父组件通过ngModel if (val)传入的数据{ this.childData=val}}注册onchange(fn : any): void {//初始化后，执行此方法并保存函数this.change=fn在控件收到change事件后调用；} registorontouched(fn : any): void { }没有必要使用get和set，所以不知道这两种方法哪个更好。

实际上，@Input和@Output可以用来通过子组件通知父组件数据更新。如果父组件的数据是通过@Input获取的，而父组件的数据是更新的，那么子组件需要监听相应的数据变化，并在ngOnChanges的生命周期中处理相应的逻辑。

但是，在自定义组件上使用ngModel双向绑定数据也可以用于表单处理，例如表单模板和表单验证。

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