Hur är de kopplade?

TaskListComponent kommer att hantera en array av uppgifter, där varje uppgift är ett objekt med fälten id, title och completed. För att visa varje uppgift kommer vi att använda TaskComponent.

Dessutom kommer TaskComponent att kommunicera med sin föräldrakomponent om användaråtgärder, såsom när en uppgift ska tas bort eller markeras som slutförd. Denna interaktion sker genom händelseutlösning.

Implementering av logik för TaskListComponent

Skapa en komponent som ansvarar för att hantera uppgiftslistan. Inuti den definieras en array av uppgifter samt två metoder — deleteTask() och toggleStatus() — för att hantera uppgifterna.

• Listan över uppgifter (tasks) hanteras inom komponenten, vilket gör TaskListComponent till den centrala kontrollenheten;
• Metoden deleteTask() filtrerar bort uppgiften med dess id;
• Metoden toggleStatus() hittar uppgiften via id och växlar dess completed-status.

Denna kod använder direktivet *ngFor för att iterera genom arrayen tasks och skapa en TaskComponent för varje uppgift. Vi kommer att titta närmare på hur *ngFor fungerar i nästa avsnitt.

• [task]="task" — skickar den aktuella uppgiften till barnkomponenten så att den kan visas;

• (onDelete)="deleteTask($event)" — lyssnar på onDelete-händelsen från barnkomponenten och anropar deleteTask() för att ta bort uppgiften;

• (onToggle)="toggleStatus($event)" — lyssnar på onToggle-händelsen och anropar toggleStatus() för att ändra uppgiftens status.

Dekoratörer: @Input() och @Output()

Nu är det dags att koppla samman TaskComponent med TaskListComponent, och för detta använder vi dekoratörerna @Input() och @Output().

I Angular är dekoratörerna @Input() och @Output() centrala verktyg för kommunikation mellan komponenter. De möjliggör att data skickas in i en komponent och att händelser emitteras ut från en komponent. Här är en snabb översikt:

Här är ett exempel på hur de fungerar i TaskComponent:

I vårt fall är task objektet som skickas från föräldrakomponenten TaskListComponent till TaskComponent.

När användaren antingen tar bort en uppgift eller ändrar dess status, skickar TaskComponent ut händelser som föräldrakomponenten lyssnar på.

@Output() och EventEmitter används för att meddela föräldrakomponenten när något händer i barnkomponenten. Dessa dekoratörer möjliggör för barnkomponenten att kommunicera åtgärder som borttagning av uppgifter eller statusändringar till föräldern.

Metoden deleteTask() anropas när användaren vill ta bort en uppgift. Den emitterar uppgiftens id, vilket gör det möjligt för föräldern att ta bort uppgiften från sin lista.

Metoden toggleTask() växlar uppgiftens slutförandestatus och informerar föräldrakomponenten om denna förändring.

Hur allt fungerar tillsammans

1. TaskListComponent skickar en uppgift till TaskComponent med hjälp av @Input();

2. Användaren interagerar med uppgiften (till exempel genom att klicka på "Delete");

3. TaskComponent emitterar en händelse (onDelete eller onToggle) med uppgiftens id;

4. TaskListComponent fångar händelsen och uppdaterar uppgiftslistan;

5. Angular uppdaterar automatiskt användargränssnittet baserat på de uppdaterade uppgifterna.

På detta sätt möjliggör @Input() och @Output() en tydlig och effektiv kommunikation mellan komponenter, vilket håller strukturen organiserad och reaktiv.