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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
javascript 模拟点击广告
Jan 02 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
分析JS中this引发的bug
Dec 12 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vuex存储token示例
Nov 11 Javascript
javascript实现移动端轮播图
Dec 09 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP生成器简单实例
2015/05/13 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
实例讲解php实现多线程
2019/01/27 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
Python中元组,列表,字典的区别
2017/05/21 Python
详解python中的线程
2018/02/10 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
导师对论文的学术评语
2015/01/04 职场文书
主持稿开场白
2015/06/01 职场文书
Docker下安装Oracle19c
2022/04/13 Servers