Дар компоненти фарзандӣ дар 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;
}

Дар файли template-и компоненти фарзандӣ баровардани додаҳоро илова мекунем:

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

Ва ҳоло дар template-и волидайн, даъват кардани теги компоненти фарзандӣ, сифатҳоеро менависем, ки номҳояшон бо номҳои хусусиятҳои синфи фарзандӣ мувофиқат мекунанд. Қиматҳои ин сифатҳо ба хусусиятҳои синфи фарзандӣ ворид мешаванд:

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