• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Angular2实现自定义双向绑定属性

Angular2实现自定义双向绑定属性

作者:violence 字体:[增加 减小] 来源:互联网 时间:2017-05-11

violence通过本文主要向大家介绍了angular自定义属性,angular自定义指令,angular.js自定义指令,angular自定义过滤器,angular自定义服务等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

整理文档,搜刮出一个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() {

  }
}

</div>

使用时,就可以通过[(username)]=“你的当前属性” 进行双向绑定了。属性名 + 后缀 Change是一个约定的固定写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Angular2实现自定义双向绑定属性

相关文章

  • 2017-05-11js实现文字无缝向上滚动
  • 2017-05-11javascript编写简易计算器
  • 2017-05-11原生JS京东轮播图代码
  • 2017-05-11springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
  • 2017-05-11nodejs个人博客开发第二步 入口文件
  • 2017-05-11javascript 操作cookies详解及实例
  • 2017-05-11JS实现选定指定HTML元素对象中指定文本内容功能示例
  • 2017-05-11JS中利用localStorage防止页面动态添加数据刷新后数据丢失
  • 2017-05-11微信小程序 弹窗自定义实例代码
  • 2017-05-11Vue.directive自定义指令的使用详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery使用正则验证15/18身份证的方法示例
    • 简单实现js选项卡切换效果
    • js自制图片放大镜功能
    • 微信小程序 登录的简单实现
    • jQuery实现的分页功能示例
    • 原生js实现图片放大缩小计时器效果
    • JavaScript数据结构之二叉树的遍历算法示例
    • 原生JS实现圣旨卷轴展开效果
    • jquery中绑定事件的异同
    • js实现3D图片展示效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有