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 document.execCommand() 常用解析
Dec 14 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
初步了解javascript面向对象
Nov 09 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 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调用Java对象的方法
2006/10/09 PHP
php 定义404页面的实现代码
2012/11/19 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
化学实验员岗位职责
2013/12/28 职场文书
商超业务员岗位职责
2014/03/12 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
党支部考察意见范文
2015/06/02 职场文书