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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
CocosCreator入门教程之网络通信
Apr 16 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+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php类常量用法实例分析
2015/07/09 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
详解vue-router基本使用
2017/04/18 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python中pyplot基础图标函数整理
2020/11/10 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
高中政治教学反思
2014/01/18 职场文书
员工评语大全
2014/01/19 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
办公室个人总结
2015/02/28 职场文书
生产设备维护保养制度
2015/08/06 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python