Apakškomponentes Angular

Kā minēts pašā apmācības sākumā, Angular viss projekts tiek sadalīts komponentēs. Iepriekšējās nodarbībās mēs strādājām tikai ar galveno komponenti, kas izveidota pēc noklusējuma. Tagad iemācīsimies izveidot apakškomponentes.

Jaunu komponenšu kods automātiski tiek ģenerēts ar Angular, izmantojot speciālu termināļa komandu: generate component. Pēc vārda component jāieraksta mūsu jaunās komponentes nosaukums. Pieņemsim, ka mēs vēlamies ģenerēt komponenti user:

ng generate component user

Pēc komandas izpildes mēs redzēsim, ka mums ir parādījies jauna mape app/user. Tajā atradīsies visi standarta komponentes faili.

Komponentes failā user.component.ts tiks automātiski izveidots komponentes dekorators:

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

Arī šajā failā tiks automātiski izveidots komponentes klase:

export class UserComponent {

}

Tagad mūsu apakškomponente ir jāpievieno vecākkomponentei. Pieņemsim, ka vecākkomponente būs app, kas sākotnēji ir pieejama ietvara instalēšanas laikā. Importēsim to mūsu komponenti:

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

Komponentes dekoratorā atslēgā imports norādīsim mūsu importēto komponenti:

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

Tagad mēs varam attēlot apakškomponentes saturu vecākkomponentē. Lai to izdarītu, vecāka komponentes veidnes failā jāieraksta speciāla birka, kuras nosaukums ir norādīts īpašībā selector dekoratorā @Component apakškomponentei. Mūsu gadījumā tā ir birka app-user. Ierakstīsim to vecāka veidnē:

kāds teksts
<app-user></app-user>

Ģenerējiet komponenti ProductComponent. Pievienojiet šo komponenti galvenajai komponentei jūsu projektā.

Ieviesiet izmaiņas apakškomponentes veidnē. Pārliecinieties, ka tās tiek piemērotas pārlūkprogrammā.

Mainiet apakškomponentes CSS stilus. Pārliecinieties, ka tiek piemēroti pārlūkprogrammā.

Apakškomponentē izveidojiet īpašības name un price. Attēlojiet to vērtības apakškomponentes veidnē.