Underkomponenter i Angular

Som nämndes i början av handledningen, delas hela projektet i Angular upp i komponenter. I tidigare lektioner arbetade vi bara med huvudkomponenten som skapades som standard. Låt oss nu lära oss att skapa underkomponenter.

Koden för nya komponenter genereras automatiskt av Angular med hjälp av ett speciellt terminalkommando: generate component. Efter ordet component måste du skriva namnet på vår nya komponent. Låt oss säga att vi vill generera en komponent user:

ng generate component user

Efter att ha kört kommandot kommer vi att se att vi har fått en ny mapp app/user. I den kommer alla standardfiler för komponenten att finnas.

I komponentfilen user.component.ts kommer en komponentdekorator att skapas automatiskt:

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

Även i denna fil kommer en komponentklass att skapas automatiskt:

export class UserComponent {

}

Nu måste vår underkomponent anslutas till den föräldrakomponent. Låt den föräldrande komponenten vara app, som finns från början när ramverket installeras. Importera vår komponent till den:

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

I komponentdekoratorn, i nyckeln imports, ange vår importerade komponent:

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

Nu kan vi visa innehållet i den underordnade komponenten i den föräldrande. För att göra detta, i förälderns mallfil, skriv en speciell tagg, vars namn anges i egenskapen selector i dekoratorn @Component för barnkomponenten. I vårt fall är detta taggen app-user. Låt oss skriva den i föräldermallen:

en del text
<app-user></app-user>

Generera komponenten ProductComponent. Anslut denna komponent till huvudkomponenten i ditt projekt.

Gör ändringar i mallfilen för underkomponenten. Se till att de tillämpas i webbläsaren.

Ändra CSS-stilarna för underkomponenten. Se till att de tillämpas i webbläsaren.

Skapa egenskaperna name och price i underkomponenten. Visa deras värden i underkomponentens mall.