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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
玩转方法:call和apply
May 08 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
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 程序授权验证开发思路
2009/07/09 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
javascript中this指向详解
2016/04/23 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
在Python中marshal对象序列化的相关知识
2015/07/01 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
研修第一天随笔感言
2014/02/15 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
婚前财产协议书范本
2014/10/19 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
mysql 获取时间方式
2022/03/20 MySQL