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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
字符串反转_JavaScript
Apr 28 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php基础知识:类与对象(5) static
2006/12/13 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python中的集合类型知识讲解
2015/08/19 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
简单了解python协程的相关知识
2019/08/31 Python
python实现机器人卡牌
2019/10/06 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python页面加载的等待方式总结
2021/02/28 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
百度吧主申请感言
2014/01/12 职场文书
党员自评材料范文
2014/12/17 职场文书
大连导游词
2015/02/12 职场文书
感恩教师节主题班会
2015/08/12 职场文书