שיעור 23 באנגולר ( angular ) – העברת מידע לתוך קומפוננטה

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

עושים זאת באמצעות הפקודה Input@

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

דוגמא – יש פה 2 קבצים, בקובץ העליון, אני מעביר משתנה בשם question

ובקובץ השני, הפנימי יותר, אני מקבל אותו עם Input@.

------------- First component ----------------
<app-question *ngFor="let question of questions" [question]="question" ></app-question>


-------------- Seconed Component TS file-------------
import { Question } from './../../models/Question';
import { Component, OnInit,Input } from '@angular/core';


@Component({
 selector: 'app-question',
 templateUrl: './question.component.html',
 styleUrls: ['./question.component.css']
})
export class QuestionComponent implements OnInit {

@Input('question') question:Question;

constructor() { }

ngOnInit() {
 }

}

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *