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 相关文章推荐
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
javascript轮播图算法
Oct 21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python最小二乘法矩阵
2019/01/02 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python表达式的优先级详解
2020/02/18 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
日期和时间问题
2015/01/04 面试题
师范生自荐信
2013/10/27 职场文书
副厂长岗位职责
2014/02/02 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技