Məlumatların Angular-da uşaq komponentinə ötürülməsi

Ana komponentdən uşaq komponentinə məlumat ötürmək mümkündür. Bu məlumatlar uşaq sinfinin xassələrinə daxil olacaq. Gəlin görək bu necə edilir.

Əvvəlcə uşaq komponentinin sinfində, ana komponentdən məlumatların idxal olunacağı xassələr yaradaq:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

İndi biz elan etməliyik ki, bu xassələrə xaricdən məlumatlar daxil olacaq. Bunun üçün xüsusi Input dekoratorundan istifadə olunur. Gəlin onu uşaq komponentimizə idxal edək:

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

İndi isə bu dekoratoru xassələrimizə tətbiq edək:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Uşaq komponentinin templ faylına məlumatların çıxarılmasını əlavə edək:

<p>{{ name }}</p>
<p>{{ age }}</p>

İndi isə ana komponentin templində uşaq komponentinin teqi çağırılanda, adları uşaq sinfinin xassələrinin adları ilə üst-üstə düşən atributlar yazaq. Bu atributların qiymətləri uşaq sinfinin xassələrinə daxil olacaq:

<user-data name="john" age="25"></user-data>