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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
javascript 原型继承介绍
Aug 30 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
javascript实现回到顶部特效
May 06 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
js实现简单数字变动效果
Nov 06 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
javascript canvas检测小球碰撞
Apr 17 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python 40行代码实现人脸识别功能
2017/04/02 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Linux下python制作名片示例
2018/07/20 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
没编程基础可以学python吗
2020/06/17 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
培训专员岗位职责
2014/02/26 职场文书
活动策划求职信模板
2014/04/21 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
教师个人自我评价
2015/03/04 职场文书
2016年母亲节寄语
2015/12/04 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python