Underkomponenter i Angular

Som nævnt i begyndelsen af vejledningen, er hele projektet i Angular opdelt i komponenter. I tidligere lektioner arbejdede vi kun med hovedkomponenten, som blev oprettet som standard. Lad os nu lære at oprette underkomponenter.

Koden for nye komponenter genereres automatisk af Angular ved hjælp af en speciel terminalkommando: generate component. Efter ordet component skal du skrive navnet på vores nye komponent. Lad os sige, at vi vil generere komponenten user:

ng generate component user

Efter udførelse af kommandoen vil vi se, at der er oprettet en ny mappe app/user. Den vil indeholde alle de standard filer, som komponenten består af.

I komponentfilen user.component.ts vil en komponent-dekoratør blive oprettet automatisk:

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

Også i denne fil vil en komponent-klasse blive oprettet automatisk:

export class UserComponent {

}

Nu skal vores underkomponent tilsluttes til forældrekomponenten. Lad forældrekomponenten være app, som er til stede som standard ved installation af frameworket. Vi importerer vores komponent til den:

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

I komponent-dekoratøren, i nøglen imports, angiver vi vores importerede komponent:

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

Nu kan vi vise indholdet af underkomponenten i forældrekomponenten. For at gøre dette skal vi i filen med forælderens template skrive en speciel tag, hvis navn er angivet i egenskaben selector i dekoratøren @Component for barnet. I vores tilfælde er dette tagget app-user. Lad os skrive det i forælderens template:

some text
<app-user></app-user>

Generer komponenten ProductComponent. Tilslut denne komponent til hovedkomponenten i dit projekt.

Foretag ændringer i underkomponentens template. Sørg for, at de anvendes i browseren.

Skift underkomponentens CSS-stilarter. Sørg for, at de anvendes i browseren.

Opret egenskaberne name og price i underkomponenten. Vis deres værdier i underkomponentens template.