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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
从vue源码看props的用法
Jan 09 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
JS严格模式原理与用法实例分析
Apr 27 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获取当前网址及域名的实现代码
2013/06/23 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
五年级数学教学反思
2014/02/11 职场文书
大学自我评价
2014/02/12 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2014年财政工作总结
2014/12/10 职场文书
先进教师事迹材料
2014/12/16 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
详解Vue router路由
2021/11/20 Vue.js