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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
JavaScript多线程的实现方法
May 08 Javascript
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
python自动化测试实例解析
2014/09/28 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
成教自我鉴定
2013/10/27 职场文书
留学自荐信写作方法
2014/01/27 职场文书
聚美优品的广告词
2014/03/14 职场文书
营销学习心得体会
2014/09/12 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
法院授权委托书格式
2014/09/28 职场文书
小学班主任工作随笔
2015/08/15 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL