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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
Nuxt页面级缓存的实现
Mar 09 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 n个不重复的随机数生成代码
2009/06/23 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python 爬虫的工具列表大全
2016/01/31 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
任长霞观后感
2015/06/16 职场文书
结婚司仪主持词
2015/06/29 职场文书
担保书格式范文
2015/09/22 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
用Python可视化新冠疫情数据
2022/01/18 Python