Angular'да бала компонентке маалымат берүү

Ата-эне компоненттен бала компонентке маалымат бере аласыз. Бул маалыматтар бала класстын касиеттерине кирет. Келгиле, бул кандай жасаларын көрөлү.

Башында, бала компоненттин класында ата-эне компоненттен маалымат алып келет касиеттерди жасайлы:

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

Эми бул касиеттерге сырттан маалымат кириши керек экенин жарыялоо керек. Бул үчүн Input деген атайын декоратор колдонулат. Аны биздин бала компонентибизге импорттоп алалы:

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

Эми бул декораторду биздин касиеттерибизге колдонолу:

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

Бала компоненттин темплейт файлына маалыматты чыгарууну кошолу:

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

Эми ата-эненин темплейтинде бала компоненттин тегин чакырганда, атрибуттарды жазабыз, алардын аталыштары биздин бала класстын касиеттеринин аталыштарына дал келет. Бул атрибуттардын маанилери бала класстын касиеттерине кирет:

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