虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > Jquery > Angular2实现自定义双向绑定属性

Angular2实现自定义双向绑定属性
类别:Jquery   作者:码皇   来源:互联网   点击:

本篇文章主要介绍了Angular 2实现自定义 双向绑定 属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

整理文档,搜刮出一个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是一个约定的固定写法。

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

相关热词搜索: angularjs 双向绑定 angular双向数据绑定