Angular2实现自定义双向绑定属性


Posted in Javascript onMarch 22, 2017

整理文档,搜刮出一个Angular 2实现自定义 双向绑定 属性的代码,稍微整理精简一下做下分享。

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';

@Component({
  selector: 'twoway',
  template: `
    <input [(ngModel)]="username">
    <p>Hello {{username}}!</p>
  `
})
export class TwoWayComponent implements OnInit {
  constructor() { }

  usernameValue: string;
  @Output() usernameChange = new EventEmitter();

  @Input()
  get username() {
    return this.usernameValue;
  }
  set username(val) {
    this.usernameValue = val;
    this.usernameChange.emit(this.usernameValue);
  }

  ngOnInit() {

  }
}

使用时,就可以通过[(username)]=“你的当前属性” 进行双向绑定了。属性名 + 后缀 Change是一个约定的固定写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
Bootstrap缩略图的创建方法
Mar 22 #Javascript
JS+DIV实现的卷帘效果示例
Mar 22 #Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 #Javascript
javascript实现滑动解锁功能
Mar 22 #Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 #Javascript
You might like
回帖脱衣服的图片实现代码
2014/02/15 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
Java程序员面试题
2013/07/15 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
档案接收函范文
2014/01/10 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
杜甫草堂导游词
2015/02/03 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Python time库的时间时钟处理
2021/05/02 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python