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 tools系列 expose 学习
Sep 06 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JavaScript中操作字符串小结
May 04 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
js实现右键自定义菜单
Dec 03 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 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通用检测函数集合
2011/02/08 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python多图片合并PDF的方法
2019/01/03 Python
详解python中的数据类型和控制流
2019/08/08 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python 从attribute到property详解
2020/03/05 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
Java程序员面试题
2013/07/15 面试题
学生会竞选演讲稿怎么写
2014/08/26 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技