Angular2實現(xiàn)自定義雙向綁定屬性
更新時間：2017年03月22日 09:17:59 作者：violence
本篇文章主要介紹了Angular 2實現(xiàn)自定義 雙向綁定 屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
整理文檔，搜刮出一個Angular 2實現(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)]=“你的當前屬性” 進行雙向綁定了。屬性名 + 后綴 Change是一個約定的固定寫法。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular.JS中的指令引用template與指令當做屬性詳解
這篇文章主要介紹了Angular.JS中的指令引用template與指令當做屬性的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Renderer2 類是 Angular 提供的一個抽象服務(wù),允許在不直接操作 DOM 的情況下操縱應(yīng)用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要為大家介紹了Angular16如何獲得路由參數(shù)的實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了使用angular寫一個hello world的方法及示例,需要的朋友可以參考下2015-01-01
這篇文章主要為大家深入解析了Angular動態(tài)導入和懶加載實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了使用ng-packagr打包Angular的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了AngularJS中isolate scope的用法,結(jié)合實例形式分析了isolate scope的幾種具體使用方式,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS 表達式，這里整理了詳細的資料，有需要的小伙伴可以參考下2016-09-09
最近這兩天公司正在做一個PDF協(xié)議下載的功能，目前的解決方案可以分為完全前端生成和后端生成兩種方式。前端生成PDF有jsPDF 和pdfmake 兩種方式，下面這篇文章就給大家分享下如何在Angular.JS中接收并下載PDF的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11