Vipengele vya Watoto katika Angular

Kama ilivyotajwa mwanzoni mwa mafunzo, katika Angular mradi wote umegawanyika katika vipengele. Katika masomo yaliyopita tulifanya kazi tu na kipengele kikuu, kilichoundwa na msingi. Sasa tujifunze kuunda vipengele vya watoto.

Nambari za vipengele vipya hutengenezwa kiotomatiki na Angular kwa kutumia amri maalum ya terminali: generate component. Baada ya neno component andika jina la kipengele chetu kipya. Wacha tuseme tunataka kutengeneza kipengele user:

ng generate component user

Baada ya kutekeleza amri hiyo, tutaona kuwa tuna folda mpya app/user. Ndani yake kutakuwa na mafaili yote ya kawaida ya kipengele.

Katika faili ya kipengele user.component.ts decorator ya kipengele itaundwa kiotomatiki:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Pia, kwenye faili hii darasa la kipengele litaundwa kiotomatiki:

export class UserComponent {

}

Sasa kipengele chetu cha mtoto kinahitaji kuunganishwa kwenye kipengele kizazi. Wacha kipengele kizazi kiwe app, ambacho kipo awali wakati wa usakinaji wa mfumo. Tuingize kipengele chetu ndani yake:

import { UserComponent } from './user/user.component';

Katika decorator ya kipengele kwenye ufunguo imports tueleze kipengele chetu kilichoingizwa:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // hapa
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Sasa tunaweza kuonyesha yaliyomo kwenye kipengele cha mtoto kwenye kipengele kizazi. Ili kufanya hivyo, kwenye faili iliyo na template ya kizazi andika kitambulisho maalum, jina ambalo limepewa kwenye sifa selector ya decorator @Component ya kizazi. Kwa upande wetu hii ni kitambulisho app-user. Tuandike kwenye template ya kizazi:

maandishi fulani
<app-user></app-user>

Tengeneza kipengele ProductComponent. Unganisha kipengele hiki kwenye kipengele kikuu cha mradi wako.

Fanya mabadiliko kwenye template ya kipengele cha mtoto. Hakikisha kuwa yatatumika kwenye kivinjari.

Badilisha mitindo ya CSS ya kipengele cha mtoto. Hakikisha kuwa yatatumika kwenye kivinjari.

Katika kipengele cha mtoto tengeneza sifa name na price. Onyesha thamani zake kwenye template ya kipengele cha mtoto.