Angular2實(shí)現(xiàn)自定義雙向綁定屬性
更新時間：2017年03月22日 09:17:59 作者：violence
本篇文章主要介紹了Angular 2實(shí)現(xiàn)自定義 雙向綁定 屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
整理文檔，搜刮出一個Angular 2實(shí)現(xià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() {
}
}
使用時，就可以通過[(username)]=“你的當(dāng)前屬性” 進(jìn)行雙向綁定了。屬性名 + 后綴 Change是一個約定的固定寫法。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn)，對此感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-05-05
在Angular中實(shí)現(xiàn)懶加載的示例代碼
在Angular中,懶加載技術(shù)通過路由配置實(shí)現(xiàn)模塊的按需加載,可優(yōu)化應(yīng)用啟動時間和減少初始加載代碼量,首先創(chuàng)建獨(dú)立模塊,在模板中使用<router-outlet>插入懶加載組件,并可采用預(yù)加載策略如PreloadAllModules,以提前加載所有懶加載模塊,優(yōu)化加載性能2024-10-10
詳細(xì)解讀AngularJS中的表單驗(yàn)證編程
這篇文章主要介紹了詳細(xì)解讀AngularJS中的表單驗(yàn)證編程,AngularJS是一個非常熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Angular2.js實(shí)現(xiàn)表單驗(yàn)證詳解
這篇文章主要介紹了Angular2.js實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06![AngularJS 使用ng-repeat報(bào)錯 [ngRepeat:dupes]](http://img.jbzj.com/images/xgimg/bcimg5.png)
AngularJS 使用ng-repeat報(bào)錯 [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報(bào)錯 [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下2017-01-01
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
詳解Angular系列之變化檢測(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(Change Detection)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
AngularJS實(shí)現(xiàn)ajax請求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請求的前端界面、ajax交互及后臺php處理技巧,需要的朋友可以參考下2016-11-11
AngularJS基礎(chǔ) ng-non-bindable 指令詳細(xì)介紹
本文主要講解AngularJS ng-non-bindable 指令,這里幫大家整理了ng-non-bindable指令的基本知識資料,有需要的小伙伴可以參考下2016-08-08