תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

קומפננטות מקוננות ב-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 כוכבים

 

 

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

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

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

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?

 

תמונת המגיב

פלוני בתאריך: 14.03.2019

this site is Stunning teaches correctly and comprehensively

תמונת המגיב

סתם בתאריך: 29.05.2019

הייתי רוצה לראות את כל הדף בסוף.
לכל קומפוננטה יש דקורטור ואקספורט והטמ"ל משלה?
וכל חלק באותו דף?
תודה !!!

תמונת המגיב

ששש בתאריך: 02.06.2019

מה קורה כשיש לי קומפוננטות מקוננות אחד בתןך השני

תמונת המגיב

מתחיל בתאריך: 06.06.2019

האם אפשר לשבץ קומפוננטה X בקומפוננטה Y אבל רק חלק ממנה ?

תמונת המגיב

עכ בתאריך: 07.12.2019

אחלה

תמונת המגיב

לולי בתאריך: 10.06.2020

למה משמש קינון קומפוננטות?

תמונת המגיב

מלכה בתאריך: 02.12.2021

ברור מאוד!!