[angular2面试题]Angular2实现自定义双向绑定属性

更新时间:2021-08-01    来源:php常用代码    手机版     字体:

【www.bbyears.com--php常用代码】

整理文档,搜刮出一个Angular 2实现自定义 双向绑定 属性的代码,稍微整理精简一下做下分享。

 代码如下

import { Component, OnInit, Output, Input, EventEmitter } from'@angular/core';

 

@Component({

  selector:'twoway',

  template: `

    

    

Hello {{username}}!

  `

})

export class TwoWayComponent implements OnInit {

  constructor() { }

 

  usernameValue: string;

  @Output() usernameChange =newEventEmitter();

 

  @Input()

  get username() {

    returnthis.usernameValue;

  }

  set username(val) {

    this.usernameValue = val;

    this.usernameChange.emit(this.usernameValue);

  }

 

  ngOnInit() {

 

  }

}

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


本文来源:http://www.bbyears.com/jiaocheng/133265.html