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 类型判断代码分析
Mar 28 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
javascript常用的设计模式
Feb 09 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
js实现图片实时时钟
Jan 15 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
vue打包时去掉所有的console.log
Apr 10 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php截取字符串函数分享
2015/02/02 PHP
php实现简单的上传进度条
2015/11/17 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python逆序打印各位数字的方法
2018/06/25 Python
python框架中flask知识点总结
2018/08/17 Python
Python 面试中 8 个必考问题
2018/11/16 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
雪山饭庄的创业计划书范文
2014/01/18 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书