local reference באפליקציה אנגולרית

משתנים מקומיים מספקים גישה ישירה לאלמנט בתוך ה-html. כדי להכריז על local reference מקדימים למזהה סולמית (#):

<input #myLocalReference value="">

בדוגמה זו, myLocalReference הוא ה-reference שאנחנו שמים על השדה בטופס.

המשתנה המקומי מתייחס לשדה שבתוכו הוא יושב, ומשתמשים בו כדי להעביר מידע:

1. לעדכון תבנית ה-html שבתוכה הוא יושב
2. לעדכון הקוד בקומפוננטה

בדוגמה הבאה, בכל פעם שנקליד תו לתוך השדה, הערך שקיים בשדה יוצג בתוך הפסקה שמתחתיו.

/src/app/app.component.ts
-----------------------------------

<input #myLocalReference value="" (keyup)="changeVal()">
<p>{{ myLocalReference.value }}</p>

/src/app/app.component.html
-----------------------------------

changeVal(){}

שימו לב, האירוע של keyup יגרום לעדכון הערך של ה-local reference ב-html באופן אוטומטי בלי שהמתודה מבצעת פעולה.

ניתן להשיג את אותה התוצאה באמצעות קריאה למתודה שתעדכן את הערך המוצג ב-html:

/src/app/app.component.ts
-----------------------------------

<input #myLocalReference value="" (keyup)="changeVal(myLocalReference.value)">
<p>{{ value }}</p>

/src/app/app.component.html
-----------------------------------

value = "";
changeVal(val: string){
  value = val
}

בכל פעם שמקלידים תו חדש לתוך השדה, הערך נשלח למתודה changeVal שמעדכנת את הערך של המשתנה value שמוצג בפסקה.

ניתן להאזין ליותר מאירוע אחד באמצעות אותו local reference:

<input #myLocalReference value=""
  (keyup)="changeVal(myLocalReference.value)"
  (blur)="changeVal(myLocalReference.value)"
>

בדוגמה זו, נאזין לשני אירועים. keyup שיורה בכל פעם שמסיימים להקליד תו חדש, ו-blur שיורה כשיוצאים מהשדה.

ניתן לגרום ליותר מפעולה אחת להגיב לאותו האירוע

<input #myLocalReference value=""
  (keyup)="changeVal(myLocalReference.value)"
  (blur)="changeVal(myLocalReference.value); myLocalReference.value=''"
>

• בדוגמה זו, האירוע blur עושה שני דברים. קורא לפונקציה changeVal , וגם מנקה את הערך של השדה.
• בין שתי הפעולות מפריד הסימן נקודה פסיק.

למדריכים נוספים בסדרת ה-Angular