angular4自定义组件非input元素实现ngModel双向数据绑定(转载)

在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定，如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐。。。

网上找了一下，没看懂记录一下。

场景：组件能获取父组件通过ngModel绑定的值，能通过ngModel改变父组件对应的数据。如下代码：　

1、先贴出效果图：

2、下面是app-child组件的代码：

3、下面开始说下实现的过程吧：

　　如果添加ngModel后报如下错误，检查组件对应的Module文件有没有导入FormsModule

　　import FormsModule后，控制台任然会报错：

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

　　先引入和使用我们必须使用的配置：

　　处理完成后控制台的报错信息已经改变：

　　这是因为ControlValueAccessor的接口有几个必须存在的方法，会自动去调用：

初始化的时候调用 writeValue() 方法，将会使用表单模型中对应的初始值作为参数（也就是ngModel里的值）。
registerOnChange() 可以用来通知外部，组件已经发生变化。
registerOnTouched() 方法用于设置当控件接收到 touched 事件后，调用的函数。

　　知道了这三个方法后，我们就可以在writeValue方法里给组件设置父组件通过ngModel传递过来的值了。如：

　　那么怎么将组件里更新的数据传递给父组件呐。

　　writeValue()方法后就会执行registerOnChange()方法，我们就是通过该方法传递回来的方法参数来通知到外部组件数据更新的，所以我们要在最开始就定义一个方法来接收。

　　然后就可以通过change方法通知外部组件了

　　最开始贴出来的代码，中间使用了set 和get去处理了数据，在get childData()方法里打断点发现会执行很多次该方法，其实也可以修改成通过更新数据的时候就直接调用change()方法来通知外部组件数据更新，如下：

　　中间不用使用get和set，不知道两种方法哪种更好。

　　其实通过子组件通知父级组件数据更新，可以使用@Input和@Output来实现的，如果是@Input获取的父级组件的数据，父级组件数据更新，子组件需要在ngOnChanges生命周期里去监听对应的数据变更并处理相应的逻辑。

　　不过在自定义组件上使用ngModel实现数据的双向绑定还可以用作表单处理上，比如表单模板和表单验证。

转载于:https://www.cnblogs.com/moondev/p/10188861.html

angular4自定义组件非input元素实现ngModel双向数据绑定(转载)相关推荐

angular学习笔记(四)- input元素的ng-model属性
input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head>< ...
微信小程序——在小程序自定义组件中获取元素定位及宽度
在自定义组件中必须要用SelectorQuery.in(),否则无法获取 demo.wxml文件 <image class="publicImg" /></ima ...
Vue自定义组件——非单文件组件
使用 component 或 components <div id="root"><h1>{{msg}}</h1><school>& ...
探秘小程序（9）：父页面与自定义组件交互
页面中引用自定义组件,页面与父组件如何交互呐? (1)页面向自定义组件传值调用页面通过标签的属性值进行传值: 组件: Component({/*** 组件的属性列表*/properties: {b ...
angular 自定义组件_如何创建Angular 6自定义元素和Web组件
angular 自定义组件 by Prateek Mishra 通过Prateek Mishra 如何创建Angular 6自定义元素和Web组件 (How to create Angular 6 C ...
vue 保留三位小数_vue input框type=number 保留两位小数自定义组件
第一步:自定义组件MyNumberInput.vue export default { props: { point: { default: 0 }, max: Number, placeholder ...
Angular自定义组件实现ngModel双向绑定
1.自定义组件ts @Component({selector: 'app-custom-tree',templateUrl: './custom-tree.component.html',styles ...
vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
vue 自定义组件 v-model
官方的介绍讲得比较全,这里就省去复制粘贴的步骤了.此处模拟一种非表单元素的 v-model 组件: 类似复选框,在组件里点选不同的选项,然后能跟父组件双向绑定. 1. 首先做好基础的排版及样式 < ...
微信小程序（组件：路由、表单、媒体、自定义组件，插槽、组件通讯、侦听器、生命周期）
三.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...

angular4自定义组件非input元素实现ngModel双向数据绑定(转载)

angular4自定义组件非input元素实现ngModel双向数据绑定(转载)相关推荐

最新文章

热门文章