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 相关文章推荐
网上抓的一个特效
May 11 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
vue实现登录拦截
Jun 29 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python 字符串常用函数详解
2019/09/11 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
教师法制教育培训学习心得体会
2016/01/14 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python