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