Hvordan er de forbundet?

TaskListComponent administrerer et array af opgaver, hvor hver opgave er et objekt med felterne id, title og completed. For at vise hver opgave anvendes TaskComponent.

Derudover kommunikerer TaskComponent med sin overordnede komponent om brugerhandlinger, såsom når en opgave skal slettes eller markeres som fuldført. Denne interaktion sker gennem event-emission.

Implementering af logik for TaskListComponent

Opret en komponent, der har ansvaret for at administrere opgavelisten. Inden i denne defineres et array af opgaver samt to metoder — deleteTask() og toggleStatus() — til håndtering af opgavestyring.

• Listen over opgaver (tasks) administreres inde i komponenten, hvilket gør TaskListComponent til den centrale controller;
• Metoden deleteTask() filtrerer opgaven fra ved hjælp af dens id;
• Metoden toggleStatus() finder opgaven via id og skifter dens completed-status.

Denne kode anvender direktivet *ngFor til at iterere gennem tasks-arrayet og oprette en TaskComponent for hver opgave. Vi ser nærmere på, hvordan *ngFor fungerer i næste afsnit.

• [task]="task" — sender den aktuelle opgave til børnekomponenten, så den kan vise den;

• (onDelete)="deleteTask($event)" — lytter efter onDelete-begivenheden fra barnet og kalder deleteTask() for at fjerne opgaven;

• (onToggle)="toggleStatus($event)" — lytter efter onToggle-begivenheden og kalder toggleStatus() for at ændre opgavens status.

Dekoratorer: @Input() og @Output()

Nu er det tid til at forbinde TaskComponent med TaskListComponent, og til det bruger vi dekoratorerne @Input() og @Output().

I Angular er dekoratorerne @Input() og @Output() centrale værktøjer til kommunikation mellem komponenter. De gør det muligt at sende data ind i en komponent og udsende begivenheder ud af en komponent. Her er et kort overblik:

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

I dette tilfælde er task objektet, der overføres fra den overordnede TaskListComponent til TaskComponent.

Når brugeren enten sletter en opgave eller ændrer dens status, udsender TaskComponent begivenheder, som den overordnede komponent lytter efter.

@Output() og EventEmitter bruges til at give besked til forældrekomponenten, når noget sker i barnekomponenten. Disse dekoratører gør det muligt for barnekomponenten at kommunikere handlinger som sletning af opgaver eller statusændringer til forælderen.

Metoden deleteTask() kaldes, når brugeren ønsker at slette en opgave. Den udsender opgavens id, hvilket gør det muligt for forælderen at fjerne opgaven fra sin liste.

Metoden toggleTask() skifter opgavens fuldførte status og informerer forældrekomponenten om denne ændring.

Sådan fungerer det hele sammen

1. TaskListComponent sender en opgave til TaskComponent ved hjælp af @Input();

2. Brugeren interagerer med opgaven (for eksempel ved at klikke på "Slet");

3. TaskComponent udsender en begivenhed (onDelete eller onToggle) med opgavens id;

4. TaskListComponent opfanger begivenheden og opdaterer opgavelisten;

5. Angular opdaterer automatisk brugergrænsefladen baseret på de opdaterede data.

På denne måde muliggør @Input() og @Output() ren og effektiv kommunikation mellem komponenter, hvilket holder strukturen organiseret og reaktiv.