Angular-da ma'lumotlarni voris komponentga uzatish

Ota komponentdan voris komponentga ma'lumotlarni uzatish mumkin. Ushbu ma'lumotlar voris komponent klassining xususiyatlariga kiradi. Keling, buni qanday qilinishini ko'rib chiqaylik.

Boshlash uchun, voris komponent klassida ota komponentdan ma'lumotlar import qilinadigan xususiyatlarni yaratamiz:

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

Endi biz ushbu xususiyatlarga tashqaridan ma'lumotlar kirib kelishini e'lon qilishimiz kerak. Buning uchun maxsus Input dekoratori ishlatiladi. Uni o'zimizning voris komponentimizga import qilaylik:

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

Endi esa ushbu dekoratorni bizning xususiyatlarimiz uchun qo'llaymiz:

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

Voris komponent templat fayliga ma'lumotlarni chiqarishni qo'shamiz:

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

Endi esa otaning templatida voris komponent tegi chaqirilganda, nomlari bizning voris klass xususiyatlari nomlari bilan mos keladigan atributlarni yozamiz. Ushbu atributlarning qiymatlari voris klass xususiyatlariga kiradi:

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