Angular2實(shí)現(xiàn)自定義雙向綁定屬性

更新時(shí)間：2017年03月22日 09:17:59 作者：violence

本篇文章主要介紹了Angular 2實(shí)現(xiàn)自定義雙向綁定屬性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

整理文檔，搜刮出一個(gè)Angular 2實(shí)現(xiàn)自定義雙向綁定屬性的代碼，稍微整理精簡(jiǎn)一下做下分享。

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() {

  }
}

使用時(shí)，就可以通過[(username)]=“你的當(dāng)前屬性” 進(jìn)行雙向綁定了。屬性名 + 后綴 Change是一個(gè)約定的固定寫法。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn)，對(duì)此感興趣的同學(xué)，可以實(shí)驗(yàn)一下
2021-05-05
在Angular中實(shí)現(xiàn)懶加載的示例代碼
在Angular中,懶加載技術(shù)通過路由配置實(shí)現(xiàn)模塊的按需加載,可優(yōu)化應(yīng)用啟動(dòng)時(shí)間和減少初始加載代碼量,首先創(chuàng)建獨(dú)立模塊,在模板中使用<router-outlet>插入懶加載組件,并可采用預(yù)加載策略如PreloadAllModules,以提前加載所有懶加載模塊,優(yōu)化加載性能
2024-10-10
詳細(xì)解讀AngularJS中的表單驗(yàn)證編程
這篇文章主要介紹了詳細(xì)解讀AngularJS中的表單驗(yàn)證編程,AngularJS是一個(gè)非常熱門的JavaScript庫(kù),需要的朋友可以參考下
2015-06-06
angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Angular2.js實(shí)現(xiàn)表單驗(yàn)證詳解
這篇文章主要介紹了Angular2.js實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下
2017-01-01
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
詳解Angular系列之變化檢測(cè)(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(cè)(Change Detection)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的前端界面、ajax交互及后臺(tái)php處理技巧,需要的朋友可以參考下
2016-11-11
AngularJS基礎(chǔ) ng-non-bindable 指令詳細(xì)介紹
本文主要講解AngularJS ng-non-bindable 指令,這里幫大家整理了ng-non-bindable指令的基本知識(shí)資料,有需要的小伙伴可以參考下
2016-08-08