ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器
本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图:
1、使用命令创建一个component
ionic g component CounterInput
类似的命令还有:
ionic g page YourPageName //创建新页面
ionic g directive YourPageName //创建指令
ionic g component YourComponentName //创建组件
ionic g provider YourProviderName //创建服务
ionic g pipe YourPipeName //创建过滤器
命令执行完成后自动生成文件如图:
2、到这里我们已经初步创建了一个自定义组件,接上来我们需要将我们的组件添加到app.module.ts的declarations数组里,以便其实页面进行调用。一般情况下我们执行完命令ionic已经自动帮我们添加进来了,但如果没有的话请自行添加。代码如下:
import { CounterInputComponent } from '../components/counter-input/counter-input'; ..... @NgModule({
declarations: [
...
CounterInputComponent
...
],
imports: [
...
3、接下来我们具体实现
counter-input.html 页面代码如下:
<ion-icon class="add" name="ios-remove-circle-outline" (click)='decrement()'></ion-icon>
<ion-input type="number" value="1" [(ngModel)]='counterValue'></ion-input>
<ion-icon class="min" name="ios-add-circle-outline" (click)='increment()'></ion-icon>
counter-input.ts 页面代码如下:
import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
@Component({
selector: 'counter-input',
templateUrl: 'counter-input.html',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CounterInputComponent),
multi: true
}]
})
export class CounterInputComponent implements ControlValueAccessor {
@Input() counterValue: number;
private propagateChange: any = {};
increment() {
this.counterValue++;
this.propagateChange(this.counterValue);//值传递
}
decrement() {
this.counterValue--;
this.propagateChange(this.counterValue);//值传递
} /*实现ControlValueAccessor接口部分*/
writeValue(val: number): void {
if (val) {
this.counterValue = val;
}
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {
}
setDisabledState?(isDisabled: boolean): void {
} }
4、到这里我们的自定义控件已经实现完了,下面是调用
<counter-input [(ngModel)]='counterValue'></counter-input>
总结:为了使自定义组件实现双向绑定(页面的传可以传递到组件,组件将值修改后又传递到页面),我们实现了ControlValueAccessor接口,实现完ControlValueAccessor接口后我们可以在调用组件的时候直接使用ngModel进行双向绑定。
参考文档:
https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
http://www.jianshu.com/p/a01015d5d83b
ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器的更多相关文章
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- 自定义组件实现双向绑定v-model
自定义组件实现 v-model 双向绑定,首先要先明白 v-model,这个指令到底实现了什么? v-model实际做的事情就是:传入一个value属性值,然后监听input事件返回一个值,用该返回值 ...
- Android自定义组件系列【4】——自定义ViewGroup实现双侧滑动
在上一篇文章<Android自定义组件系列[3]--自定义ViewGroup实现侧滑>中实现了仿Facebook和人人网的侧滑效果,这一篇我们将接着上一篇来实现双面滑动的效果. 1.布局示 ...
- 7.vue组件(二)--双向绑定,父子组件访问
本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- 自定义组件Component
定义compa组件 由4个页面构成 compa.js: compa.json: compa.wxml: compa:wxss: 1.compa.json:在json文件进行自定义组件声明 { &quo ...
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
- Yii2.0 高级模版编写使用自定义组件(component)
翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-tem ...
随机推荐
- Java SE学习【二】——面向对象
面向对象的学习也进行了一段时间,这段时间学了,类和对象:属性:方法:封装:继承:多态:接口.也算是有一些自己的理解,不愧是贴近人类思维的思想,老师讲时我常常会想到以前的一些事物和其交相印证,其中最常想 ...
- 【Linux】DNS服务-BIND从服务器、缓存服务器及转发服务器配置(三)
环境 操作系统:CentOS 6.5 DNS软件:bind(安装参照:[Linux]DNS服务-BIND基础配置(二)) BIND从服务器 从服务器就是在bind的主配置文件中添加从域example. ...
- linux_添加一个普通用户
useradd 用户名 passwd 密码 su 用户名 可以切换用户 exit 返回之前登录的用户 sodu用户 --> 不用告诉普通用户root的密码 可以查看所有的系统文件 包括root下 ...
- OpenCV-图像通道转换问题
OpenCV-MAT对象中使用plt.imshow(img[:,:,::-1])如何实现将第二轴反向? 系统平台:win10 x64 一.明确几个概念: 1.OpenCV内部每个通道并没有固定对应某种 ...
- ssh定义、操作
Secure Shell(縮寫为SSH)SSH為一项建立在应用层和传输层基础上的安全协议,为计算机上的Shell(壳层)提供安全的传输和使用环境. 传统的网络服务程序,如rsh.FTP.POP和Tel ...
- Cisco interview
A. 1. Self-introduction I am Yanlin He . I am a master degree candidate of school of infomation sci ...
- 2019.01.19 codeforces343D.Water Tree(树剖+ODT)
传送门 ODTODTODT板子题. 支持子树01覆盖,路径01覆盖,询问一个点的值. 思路:当然可以用树剖+线段树,不过树剖+ODTODTODT也可以很好的水过去. 注意修改路径时每次跳重链都要修改. ...
- ac自动机板子
hdu2222 #include<bits/stdc++.h> #define ll long long #define M 500005 using namespace std; int ...
- jitter
release jitter of tasks there is a distinction between the real activation request and the actual ac ...
- excel的小bug
http://muchong.com/html/201710/3913047.html Excel也有相同现象,试着计算:exp(-1.5^2),exp(0-1.5^2),exp(-(1.5)^2)看 ...