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 ...
随机推荐
- 乘积最大(NOIP2000&NOIP水题测试(2017082301))
题目链接:乘积最大 这道题显然是道区间dp. 难度不是很大. 思路也很清晰. 我们设计一个三维状态. ans[l][r][k] 这里表示在闭区间[l,r]上操作k次的最大值. 操作就是加乘号. 转移也 ...
- 20155312 2016-2017-2 《Java程序设计》第十周学习总结
20155312 2016-2017-2 <Java程序设计>第十周学习总结 ## 课堂内容总结 数组 遍历数组: for(...,arr) for(i=0;i<arr.length ...
- one or more
想到以后如果一直都是这样,那么以后的生活是多么多么可怕啊. 感觉毫无期盼.没有意义. 如果变得理所当然那是多么多么让人害怕的事,吓得让人发抖. 所以在以后漫长的岁月里,还是一个人吧 如果相互看不惯,感 ...
- C# 单例模式的五种写法
1.简单实现 C# 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 public sealed c ...
- kbmmw ORM 对象定义语法简析
使用kbmmw 的ORM 一定先要了解ORM 的对象定义语法. 下面简单说一下 // kbmMW_Table - Define a table. 定义一个表 // Must be used on cl ...
- vsftpd只能连接不能上传文件问题
Centos7 记得很清楚,vsftpd安装后,不需要配置,本地用户就可以正常使用(登录.上传.下载) 这次配的就是不行,另起了个虚拟机,装了下,就是不需要配置,但是在一台机上,就是不行,只能登录,下 ...
- 更新源pip
国内镜像源列表 豆瓣(douban) http://pypi.douban.com/simple/清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/阿里云 h ...
- pipenv知识积累
pip install pipenv 安装pipenv pipenv --python 3.6 指定某一Python版本创建环境 pipenv --py 显示Python解释器信息 pipenv -- ...
- IntelliJ IDEA 2017版 spring-boot 拦截器的操作三种方式
一.注解方式 @WebServlet(urlPatterns = "/myServlet") public class MyServlet extends HttpServlet ...
- HTTP 错误 500.XX - Internal Server Error 解决办法
HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息 模块 IIS Web Core 通知 未知 处理程序 尚未 ...