Kinderkomponente in Angular

Soos aan die begin van die handleiding genoem, word die hele projek in Angular opgebreek in komponente. In vorige lesse het ons net met die hoofkomponent gewerk, wat by verstek geskep is. Laat ons nou leer hoe om kinderkomponente te skep.

Die kode van nuwe komponente word outomaties deur Angular gegenereer met 'n spesiale terminaleopdrag: generate component. Na die woord component moet ons die naam van ons nuwe komponent skryf. Kom ons sê ons wil die komponent user genereer:

ng generate component user

Na die uitvoering van die opdrag sal ons sien dat 'n nuwe gids app/user verskyn het. Daarin sal al die standaard komponentlêers wees.

In die komponentlêer user.component.ts sal die komponentdekorateur outomaties geskep word:

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

Ook sal die komponentklas outomaties in hierdie lêer geskep word:

export class UserComponent {

}

Nou moet ons ons kinderkomponent aan die ouer koppel. Laat die ouer die komponent app wees, wat oorspronklik teenwoordig is by die installering van die raamwerk. Laat ons ons komponent daarin invoer:

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

In die komponentdekorateur, by die sleutel imports, spesifiseer ons ons ingevoerde komponent:

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

Nou kan ons die inhoud van die kinderkomponent in die ouer uitvoer. Om dit te doen, moet ons in die lêer met die sjabloon van die ouer 'n spesiale tag skryf, waarvan die naam gespesifiseer is in die eenskap selector van die @Component-dekorateur van die nageslag. In ons geval is dit die tag app-user. Laat ons dit in die sjabloon van die ouer skryf:

'n Bietjie teks
<app-user></app-user>

Gegenereer die komponent ProductComponent. Koppel hierdie komponent aan die hoofkomponent van jou projek.

Maak veranderinge in die sjabloon van die kinder- komponent. Maak seker dat dit in die blaaier toegepas word.

Verander die CSS-style van die kinderkomponent. Maak seker dat dit in die blaaier toegepas word.

Maak die eienskappe name en price in die kinderkomponent. Voer hul waardes in die sjabloon van die kinderkomponent uit.