Տվյալների փոխանցում դուստր կոմպոնենտին 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>