אנגולר, קומפוננטות - Components

העברת מידע בין קומפוננטות

יש לנו כמה מופעים של הקומפוננטה, אבל איך כל מופע מקבל את המידע הייחודי שלו?

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

קבלת המידע לקומפוננטה

בדרך כלל את המידע השונה לכל קומפוננטה נקבל מ-Database כלשהו. כרגע ניצור אובייקט שמחזיק את המידע הזה כדי להציג אותו.

את המידע נחזיק בקובץ ההורה של הקומפוננטה ומשם נשלח אותו לקומפוננטת הילד.

קובץ app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses = [
    {
      title: 'Angular',
      content: 'Angular most comprehensive course. Some more text describing the Angular course.',
      imageUrl: 'assets/angular-course.png'
    },
    {
      title: 'Javascript',
      content: 'Javascript most comprehensive course. Some more text describing the Javascript course.',
      imageUrl: 'assets/javascipt-course  .png'
    },
    {
      title: 'Fullstack Dev',
      content: 'Fullstack most comprehensive course. Some more text describing the Fullstack course.',
      imageUrl: 'assets/fullstack-course.png'
    }
  ];
}

העברת המידע לקומפוננטת הילד

את המידע שיש לנו במערך האובייקטים נשלח למשתנה שיחזיק אותו בקומפוננטת הילד.

קובץ app.component.html

<div class="container mt-5">
  <div class="d-flex justify-content-evenly">
    <div>
      <app-card 
        [title]="courses[0].title"
        [content]="courses[0].content",
        [imageUrl]="courses[0].imageUrl">
      </app-card>
    </div>
    <div>
      <app-card 
        [title]="courses[1].title"
        [content]="courses[1].content",
        [imageUrl]="courses[1].imageUrl">
      </app-card>
    </div>
    <div>
      <app-card 
        [title]="courses[2].title"
        [content]="courses[2].content",
        [imageUrl]="courses[2].imageUrl">
      </app-card>
    </div>
  </div>
</div>

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

קובץ card.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() title: string = '';
  @Input() content: string = '';
  @Input() imageUrl: string = '';
}

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

קובץ card.component.html

<div class="card" style="width: 18rem;">
  <img src="{{ imageUrl }}" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">{{ title }}</h5>
    <p class="card-text">{{ content }}</p>
    <a href="#" class="btn btn-primary">Sign Up</a>
  </div>
</div>

שימוש בלולאת ngFor לקריאת הנתונים

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

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

קובץ app.component.html

<div class="container mt-5">
  <div class="d-flex justify-content-evenly">
    <div *ngFor="let course of courses">
      <app-card
        [title]="course.title"
        [content]="course.content"
        [imageUrl]="course.imageUrl">
      </app-card>
    </div>
  </div>
</div>

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