קומפננטות מקוננות ב-Angular
אחרי שבמדריך קודם למדנו
ליצור קומפננטות Angular באמצעות שורת הפקודות
(CLI), במדריך זה נלמד להוסיף קומפננטות ידנית. כמו-כן, נלמד כיצד לקנן (= לשים בתוך) קומפננטה אחת בתוך קומפננטה אחרת.
* קינון מהמילה קן (לציפור). תרגום של nesting.
באפליקציה שנכתוב במדריך:
- ניצור שתי קומפננטות, cat ו-cats.
- נקנן את הקומפוננטה cat בתוך הקומפוננטה cats,
- ונשבץ את הקומפוננטה cats בתוך הקובץ הראשי של האפליקציה.
1. ניצור אפליקציה חדשה ששמה cats
ניצור את האפליקציה מה-CLI כפי שהסברנו במדריך "שלום עולם Angular".
> ng new cats
נכנס לתיקיית הפרויקט, ונריץ את האפליקציה
> cd cats
> ng serve
נגלוש לאפליקציה שיצרנו בכתובת
//localhost:4200
2. עריכה ראשונית של הקוד
נשנה את ערכו של המשתנה title בקובץ הקומפננטה הראשית:
/src/app/app.component.ts
---------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cats';
}
נערוך את קובץ ההטמ"ל של הקומפוננטה. נסיר את כל התוכן שיורד עם החבילה, ונשאר עם הקוד שמדפיס את ה-title, שאת ערכו הגדרנו במחלקה AppComponent.
/src/app/app.component.html
---------------------------------------
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
כך תראה האפליקציה שלנו בדפדפן:
3. נוסיף ידנית את הקומפוננטה הראשונה שלנו ששמה cat
נוסיף ידנית את הקומפוננטה cat בתוך תיקייה שגם שמה cat שאותה נוסיף לתוך התיקייה src/app
/src/app/cat/
נוסיף לתוך תיקיית הקומפוננטה את קבצי ה-ts וה-html:
/src/app/cat/cat.component.ts
/src/app/cat/cat.component.html
נערוך את הקובץ ה-cat.component.ts
/src/app/cat/cat.component.ts
---------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-cat',
templateUrl: './cat.component.html'
})
export class CatComponent {
petSound = 'meow';
}
בשורה הראשונה אנו מייבאים את האובייקט Component מליבת אנגולר.
בשורה הבאה אנו מגדירים את התכונות של הקומפוננטה באמצעות הדקורטור @Component . הגדרות אילו כוללות:
selector - משמש לזיהוי הקומפוננטה כשנשבץ אותה לתוך קומפננטה אחרת. בדוגמה שלנו, הקומפננטה תזוהה על ידי התגית
<app-cat></app-cat>
בכל מקום שבו נרצה לשבץ אותה באפליקציה.
templateUrl - תהיה תבנית ההטמ"ל שתשמש את הקומפננטה.
שם המחלקה CatComponent הוא בהתאם לשם הקומפננטה ובסוף מוסיפים את המילה Component.
את המחלקה אנחנו חייבים לייצא כדי לחשוף אותה ליתר האפליקציה.
כך נראה שלד המחלקה:
export class CatComponent {
}
בתוך המחלקה מגדירים תכונות ומתודות של המחלקה.במקרה זה, נגדיר את התכונה petSound.
export class CatComponent {
petSound = 'meow';
}
כדי שנוכל לצפות בערך המשתנה, נערוך את קובץ ההטמ"ל, ונשבץ את המשתנה בין סוגריים מסולסלים. מה שיגרום לאנגולר לרנדר את התוכן בהתאם לערכו של המשתנה.
/src/app/cat/cat.component.html
-------------------------------------------
<p>My cat says {{petSound}}</p>
4. נוסיף את הקומפוננטה cats
לפי אותם שלבים ששימשו אותנו להוספת הקומפננטה cat
/src/app/cats/cats.component.ts
---------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-cats',
templateUrl: './cats.component.html'
})
export class CatsComponent { }
לא לשכוח להוסיף את קובץ ההטמ"ל של הקומפננטה
/src/app/cats/cats.component.html
5. ניידע את האפליקציה על הקומפננטות שהוספנו
ניידע את האפליקציה על הקומפננטות שהוספנו בזה שנייבא את הקומפננטות ל-app.module.ts ונוסיף את שמם לרשימת ה-declarations
src/app/app.module.ts
------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CatComponent } from './cat/cat.component';
import { CatsComponent } from './cats/cats.component';
@NgModule({
declarations: [
AppComponent,
CatComponent,
CatsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
6. נשבץ את הקומפננטה cats בתוך הקומפננטה app
כפי שהסברנו בתחילת המדריך, ניתן לקנן (nesting) קומפוננטה אחת בתוך קומפוננטה אחרת. ומה שהקוד הבא עושה הוא לקנן את הקומפוננטה cats בתוך הקובץ הראשי של האפליקציה app.
src/app/app.component.html
------------------------------
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<app-cats></app-cats>
* הקומפוננטה cats קיימת בתוך התגית app-cats לפי שמו של הסלקטור (ראה צעד מספר 4).
7. נשבץ את הקומפננטה cat בתוך הקומפננטה cats
src/app/cats/cats.component.html
------------------------------
<p>
The component "cats" works!
</p>
<p>And has the following sub components</p>
<app-cat></app-cat>
<app-cat></app-cat>
<app-cat></app-cat>
כפי שניתן לראות בדוגמה. ניתן לשבץ את הקומפננטה יותר מפעם אחת.
לסיכום זו התוצאה של התרגיל בקינון קומפננטות שעשינו במדריך
במדריך הבא, נלמד כיצד להעביר מידע בין קומפננטות אחיות באנגולר
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.