Barnekomponenter i Angular

Som nevnt i begynnelsen av opplæringen, er hele prosjektet i Angular delt inn i komponenter. I tidligere leksjoner jobbet vi kun med hovedkomponenten, som ble opprettet som standard. La oss nå lære å opprette barnekomponenter.

Koden for nye komponenter genereres automatisk av Angular ved hjelp av en spesiell terminalkommando: generate component. Etter ordet component må du skrive navnet på vår nye komponent. La oss si at vi ønsker å generere komponenten user:

ng generate component user

Etter å ha utført kommandoen vil vi se at vi har fått en ny mappe app/user. I den vil alle standardfilene for komponenten befinne seg.

I komponentfilen user.component.ts vil en dekorator for komponenten automatisk bli opprettet:

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

Også i denne filen vil en klasse for komponenten automatisk bli opprettet:

export class UserComponent {

}

Nå må vår barnekomponent kobles til foreldrekomponenten. La foreldrekomponenten være app-komponenten, som opprinnelig finnes ved installasjon av rammeverket. La oss importere vår komponent til den:

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

I komponentdekoratøren, i nøkkelen imports, angir vi vår importerte komponent:

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

Nå kan vi vise innholdet av barnekomponenten i foreldrekomponenten. For å gjøre dette må vi i filen med forelderens mal skrive en spesiell tag, hvis navn er satt i egenskapen selector i dekoratøren @Component for barnekomponenten. I vårt tilfelle er dette taggen app-user. La oss skrive den i forelderens mal:

litt tekst
<app-user></app-user>

Generer komponenten ProductComponent. Tilkoble denne komponenten til hovedkomponenten i prosjektet ditt.

Gjør endringer i malen for barnekomponenten. Forsikre deg om at de blir tatt i bruk i nettleseren.

Endre CSS-stilene for barnekomponenten. Forsikre deg om at de blir tatt i bruk i nettleseren.

I barnekomponenten, opprett egenskapene name og price. Vis deres verdier i malen for barnekomponenten.