local reference באפליקציה אנגולרית
משתנים מקומיים מספקים גישה ישירה לאלמנט בתוך ה-html. כדי להכריז על local reference מקדימים למזהה סולמית (#):
<input #myLocalReference value="">
בדוגמה זו, myLocalReference הוא ה-reference שאנחנו שמים על השדה בטופס.
המשתנה המקומי מתייחס לשדה שבתוכו הוא יושב, ומשתמשים בו כדי להעביר מידע:
- לעדכון תבנית ה-html שבתוכה הוא יושב
- לעדכון הקוד בקומפוננטה
בדוגמה הבאה, בכל פעם שנקליד תו לתוך השדה, הערך שקיים בשדה יוצג בתוך הפסקה שמתחתיו.
/src/app/app.component.ts
-----------------------------------
<input #myLocalReference value="" (keyup)="changeVal()">
<p>{{ myLocalReference.value }}</p>
/src/app/app.component.html
-----------------------------------
changeVal(){}
שימו לב, האירוע של keyup יגרום לעדכון הערך של ה-local reference ב-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
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
הדס בתאריך: 24.10.2018
מדריך מעולה!!
יוסי בן הרוש בתאריך: 24.10.2018
בשמחה.
חנה בתאריך: 27.12.2018
פשוט בהיר!
דבי בתאריך: 23.01.2019
אין מילים! תודה רבה!
אבי בתאריך: 18.02.2021
נראה לי יש קצת בילבול בכותרת איזה דף מוצג מעל כל קוד
רחל בתאריך: 25.05.2022
האם השורה לעיל תקינה: (blur)="changeVal(myLocalReference.value); myLocalReference.value=''" איך יתכן שאין סוגר לגרשיים?