כמובן שאנגולר לא משרתת אותנו רק עם דפים סטטים, אלא חלק חשוב בכוח של אנגולר הוא להזריק פנימה עבורנו פיסות מידע למקומות המתאימים בעמוד.
בפוסט הזה אראה מספר דוגמאות בסיסיות כיצד קושרים מידע ממחלקת ה-component (קובץ ts) אל תבנית ה-html שמופיע תחת template, או תחת הקובץ שצויין תחת templateUrl.
דוגמא 1 – Data Binding של משתנים פרימיטיבים באנגולר
- ניצור component חדש לצורך הדוגמא באמצעות ה-cli
ng g component components/a_sandbox1
- בתוך המחלקה (של ה-component) נגדיר 2 משתנים
export class ASandbox1Component implements OnInit {
name='Bob';
age=37;
- כעת בתוך התבנית html של הקומפוננט, "נקשור" את 2 המשתנים אל תוך התבנית.
@Component({
selector:'app-a-sandbox1',
template:`My name is {{name}} and I'm {{age}} years old.`,
- כדי לראות את התוצאה – צריך לזכור כמובן להכניס את ה-selector אל תוך ה- app.component.html.
- התוצאה – בכל פעם שתוכן המשתנים ישתנה – הם ישתנו אוטומטית על המסך, ללא צורך באף שורת קוד מצידנו. מספיק שקשרנו אותם פעם אחת, ומרגע זה התבנית html שלנו הפכה להיות דינמית, "חיה" ומגיבה לשינויים בתוכן המשתנים.
דוגמא 2 – Data Binding של אובייקטים באנגולר
בדיוק כמו שעשינו עם משתנים פרימטיבים, אפשר לעשות דבר דומה עם אובייקטים.
- נוסיף אוביקט למחלקה
- נקשור אותו אל תוך התבנית
- ואותה תוצאה בדיוק – התבנית הפכה להיות חיה ונושמת.
@Component({
selector:'app-a-sandbox1',
template:`My name is {{name}} and I'm {{age}} years old.
<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>
`,
styleUrls: ['./a-sandbox1.component.css']
})
export class ASandbox1Component implements OnInit {
name='Bob';
age=37;
candy= { "color":"yellow" , "taste":"sweet"};
דוגמא 3 – חצי מילה על מחזור חיים של משתנה
כמו כל שפה מונחית עצמית, גם type script מכילה פונקצית constructor.
בדוגמא הזו, אראה כיצד למרות שהגדרתי את המשתנה בעת ההגדרה לערך מסוים – 40, עדין, כיוון שהקונסטרקטור רץ, אז אם הוא מכיל הגדרה אחרת, אז ההגדרה של הקונסטרקטור למשתנה, דורסת את ההגדרה הראשונית.
שימו לב למשתנה age בדוגמא הבאה, בזמן ההגדרה הוא מושם כ-40, ולאחר ריצת הקונסטרטור הוא מושם כ-45 – וזה מה שיוצג על המסך – 45.
@Component({
selector:'app-a-sandbox1',
template:`My name is {{name}} and I'm {{age}} years old.
<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>
`,
styleUrls: ['./a-sandbox1.component.css']
})
export class ASandbox1Component implements OnInit {
name='Bob';
age=40;
candy= { "color":"yellow" , "taste":"sweet"};
constructor() {
this.age=45;
}
דוגמא 4 – Data Binding אל פונקציה.
בדיוק כמו שקשרנו את התבנית אל משתנים, אפשר לקשור גם אל פונקציות.
שימו לב לדוגמא הבאה :
@Component({
selector:'app-a-sandbox1',
template:`My name is {{name}} and I'm {{age}} years old.
<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>
<p>again...My age is {{ giveMeAge() }}</p>
`,
styleUrls: ['./a-sandbox1.component.css']
})
export class ASandbox1Component implements OnInit {
name='Bob';
age=40;
candy= { "color":"yellow" , "taste":"sweet"};
constructor() {
this.age=45;
}
giveMeAge() {
returnthis.age;
}
לסיכום, ראינו במספר דוגמאות, את האפשרות לקשור משתנים בתבנית אל משתנים במחלקה.