本文主要示例在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双向绑定之自定义计数器的更多相关文章

  1. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  2. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  3. 自定义组件实现双向绑定v-model

    自定义组件实现 v-model 双向绑定,首先要先明白 v-model,这个指令到底实现了什么? v-model实际做的事情就是:传入一个value属性值,然后监听input事件返回一个值,用该返回值 ...

  4. Android自定义组件系列【4】——自定义ViewGroup实现双侧滑动

    在上一篇文章<Android自定义组件系列[3]--自定义ViewGroup实现侧滑>中实现了仿Facebook和人人网的侧滑效果,这一篇我们将接着上一篇来实现双面滑动的效果. 1.布局示 ...

  5. 7.vue组件(二)--双向绑定,父子组件访问

    本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...

  6. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  7. 自定义组件Component

    定义compa组件 由4个页面构成 compa.js: compa.json: compa.wxml: compa:wxss: 1.compa.json:在json文件进行自定义组件声明 { &quo ...

  8. 微信小程序自定义组件的使用以及调用自定义组件中的方法

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...

  9. Yii2.0 高级模版编写使用自定义组件(component)

    翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-tem ...

随机推荐

  1. Java SE学习【二】——面向对象

    面向对象的学习也进行了一段时间,这段时间学了,类和对象:属性:方法:封装:继承:多态:接口.也算是有一些自己的理解,不愧是贴近人类思维的思想,老师讲时我常常会想到以前的一些事物和其交相印证,其中最常想 ...

  2. 【Linux】DNS服务-BIND从服务器、缓存服务器及转发服务器配置(三)

    环境 操作系统:CentOS 6.5 DNS软件:bind(安装参照:[Linux]DNS服务-BIND基础配置(二)) BIND从服务器 从服务器就是在bind的主配置文件中添加从域example. ...

  3. linux_添加一个普通用户

    useradd 用户名 passwd 密码 su 用户名 可以切换用户 exit 返回之前登录的用户 sodu用户 --> 不用告诉普通用户root的密码 可以查看所有的系统文件 包括root下 ...

  4. OpenCV-图像通道转换问题

    OpenCV-MAT对象中使用plt.imshow(img[:,:,::-1])如何实现将第二轴反向? 系统平台:win10 x64 一.明确几个概念: 1.OpenCV内部每个通道并没有固定对应某种 ...

  5. ssh定义、操作

    Secure Shell(縮寫为SSH)SSH為一项建立在应用层和传输层基础上的安全协议,为计算机上的Shell(壳层)提供安全的传输和使用环境. 传统的网络服务程序,如rsh.FTP.POP和Tel ...

  6. Cisco interview

    A.  1. Self-introduction I am Yanlin He . I am a master degree candidate of school of infomation sci ...

  7. 2019.01.19 codeforces343D.Water Tree(树剖+ODT)

    传送门 ODTODTODT板子题. 支持子树01覆盖,路径01覆盖,询问一个点的值. 思路:当然可以用树剖+线段树,不过树剖+ODTODTODT也可以很好的水过去. 注意修改路径时每次跳重链都要修改. ...

  8. ac自动机板子

    hdu2222 #include<bits/stdc++.h> #define ll long long #define M 500005 using namespace std; int ...

  9. jitter

    release jitter of tasks there is a distinction between the real activation request and the actual ac ...

  10. excel的小bug

    http://muchong.com/html/201710/3913047.html Excel也有相同现象,试着计算:exp(-1.5^2),exp(0-1.5^2),exp(-(1.5)^2)看 ...