Hvordan er de koblet sammen?

TaskListComponent vil administrere et array av oppgaver, hvor hver oppgave er et objekt med feltene id, title og completed. For å vise hver oppgave, bruker vi TaskComponent.

I tillegg vil TaskComponent kommunisere med sin foreldreskomponent om brukerhandlinger, som når en oppgave skal slettes eller markeres som fullført. Denne interaksjonen skjer gjennom hendelsesutsending.

Implementering av logikken i TaskListComponent

La oss lage en komponent som har ansvar for å administrere oppgavelisten. Inne i denne definerer vi et array av oppgaver og legger til to metoder — deleteTask() og toggleStatus() — for å håndtere oppgavestyring.

• Listen over oppgaver (tasks) administreres i komponenten, noe som gjør TaskListComponent til den sentrale kontrolleren;
• Metoden deleteTask() filtrerer ut oppgaven basert på dens id;
• Metoden toggleStatus() finner oppgaven ved hjelp av id og bytter dens completed-status.

Denne koden bruker direktivet *ngFor for å iterere gjennom tasks-arrayet og opprette en TaskComponent for hver oppgave. Vi skal se nærmere på hvordan *ngFor fungerer i neste seksjon.

• [task]="task" — sender den aktuelle oppgaven til barnekomponenten slik at den kan vises;

• (onDelete)="deleteTask($event)" — lytter etter onDelete-hendelsen fra barnet og kaller deleteTask() for å fjerne oppgaven;

• (onToggle)="toggleStatus($event)" — lytter etter onToggle-hendelsen og kaller toggleStatus() for å endre oppgavens status.

Dekoratører: @Input() og @Output()

Nå er det på tide å koble TaskComponent med TaskListComponent, og til dette bruker vi dekoratørene @Input() og @Output().

I Angular er dekoratørene @Input() og @Output() sentrale verktøy for kommunikasjon mellom komponenter. De gjør det mulig å sende data inn i en komponent og sende hendelser ut av en komponent. Her er en kort oversikt:

Her er et eksempel på hvordan de fungerer i TaskComponent:

I vårt tilfelle er task objektet som sendes fra forelderen TaskListComponent inn i TaskComponent.

Når brukeren enten sletter en oppgave eller endrer statusen, sender TaskComponent ut hendelser som forelderen lytter etter.

@Output() og EventEmitter brukes for å varsle foreldekomponenten når noe skjer i barnekomponenten. Disse dekoratørene gjør det mulig for barnekomponenten å kommunisere handlinger som sletting av oppgaver eller statusendringer til forelderen.

Metoden deleteTask() kalles når brukeren ønsker å slette en oppgave. Den emitterer oppgavens id, slik at forelderen kan fjerne oppgaven fra listen sin.

Metoden toggleTask() endrer oppgavens fullført-status og informerer foreldekomponenten om denne endringen.

Hvordan alt fungerer sammen

1. TaskListComponent sender en oppgave til TaskComponent ved hjelp av @Input();

2. Brukeren samhandler med oppgaven (for eksempel ved å klikke på "Slett");

3. TaskComponent emitterer en hendelse (onDelete eller onToggle) med oppgavens id;

4. TaskListComponent fanger opp hendelsen og oppdaterer oppgavelisten;

5. Angular oppdaterer automatisk brukergrensesnittet basert på de oppdaterte dataene.

På denne måten muliggjør @Input() og @Output() ren og effektiv kommunikasjon mellom komponenter, og holder strukturen organisert og reaktiv.