Service-Injectie in een Component
Je hebt de TaskService aangemaakt, die verantwoordelijk is voor het opslaan en beheren van de takenlijst. De service zelf heeft echter geen directe interactie met de gebruikersinterface. Om de gegevens van de service naar de template van de component te krijgen, moet je de service injecteren in de bijbehorende component.
Nu zie je hoe Angular automatisch helpt om services te koppelen aan componenten met behulp van Dependency Injection (DI) en hoe de service binnen de component functioneert.
Wat is Dependency Injection?
Dependency Injection (DI) is een ontwerppatroon waarbij Angular automatisch de benodigde afhankelijkheden (zoals services) injecteert in de constructor van een component.
Dankzij DI maken componenten niet zelf instanties van services aan — ze ontvangen eenvoudigweg een reeds aangemaakte instantie. Angular zorgt voor het leveren van de benodigde objecten aan degenen die ze nodig hebben.
Dit werkt omdat de service is voorzien van de volgende decoratie:
@Injectable({
providedIn: 'root'
})
Deze decorator geeft aan Angular de instructie om één enkele instantie (singleton) van de service voor de gehele app te creëren en deze beschikbaar te maken voor DI.
Service injecteren in een component
Nu wordt de TaskService geïnjecteerd in de TaskListComponent, zodat deze de takenlijst kan ophalen en ermee kan werken.
Hier volgt de componentcode:
task-list.ts
We importeren de TaskService, de Task interface en andere benodigde componenten en modules voor de template.
In de constructor van de component voegen we de service toe via Dependency Injection:
task-list.ts
Deze wordt als een privéveld opgeslagen om te gebruiken in de methoden van de component. Direct nadat de component is aangemaakt (in de constructor), halen we de takenlijst op. Deze lijst wordt vervolgens gebruikt in de HTML-template.
De methoden deleteTask en toggleStatus roepen de functies van de service aan om een taak te verwijderen of de status ervan te wijzigen, en werken vervolgens de lokale tasks array bij zodat de gebruikersinterface de wijzigingen weergeeft.
Deze aanpak houdt het component eenvoudig: het weet niet hoe de gegevens worden opgeslagen of verwerkt — het vraagt de service alleen om deze bij te werken. Dit scheidt verantwoordelijkheden: componenten behandelen de weergave, en services behandelen de gegevens.
1. Wat is Dependency Injection (DI) in Angular?
2. Waarom werken we this.tasks bij na het aanroepen van deleteTask of toggleStatus?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 3.13Service-Injectie in een Component
Veeg om het menu te tonen
Je hebt de TaskService aangemaakt, die verantwoordelijk is voor het opslaan en beheren van de takenlijst. De service zelf heeft echter geen directe interactie met de gebruikersinterface. Om de gegevens van de service naar de template van de component te krijgen, moet je de service injecteren in de bijbehorende component.
Nu zie je hoe Angular automatisch helpt om services te koppelen aan componenten met behulp van Dependency Injection (DI) en hoe de service binnen de component functioneert.
Wat is Dependency Injection?
Dependency Injection (DI) is een ontwerppatroon waarbij Angular automatisch de benodigde afhankelijkheden (zoals services) injecteert in de constructor van een component.
Dankzij DI maken componenten niet zelf instanties van services aan — ze ontvangen eenvoudigweg een reeds aangemaakte instantie. Angular zorgt voor het leveren van de benodigde objecten aan degenen die ze nodig hebben.
Dit werkt omdat de service is voorzien van de volgende decoratie:
@Injectable({
providedIn: 'root'
})
Deze decorator geeft aan Angular de instructie om één enkele instantie (singleton) van de service voor de gehele app te creëren en deze beschikbaar te maken voor DI.
Service injecteren in een component
Nu wordt de TaskService geïnjecteerd in de TaskListComponent, zodat deze de takenlijst kan ophalen en ermee kan werken.
Hier volgt de componentcode:
task-list.ts
We importeren de TaskService, de Task interface en andere benodigde componenten en modules voor de template.
In de constructor van de component voegen we de service toe via Dependency Injection:
task-list.ts
Deze wordt als een privéveld opgeslagen om te gebruiken in de methoden van de component. Direct nadat de component is aangemaakt (in de constructor), halen we de takenlijst op. Deze lijst wordt vervolgens gebruikt in de HTML-template.
De methoden deleteTask en toggleStatus roepen de functies van de service aan om een taak te verwijderen of de status ervan te wijzigen, en werken vervolgens de lokale tasks array bij zodat de gebruikersinterface de wijzigingen weergeeft.
Deze aanpak houdt het component eenvoudig: het weet niet hoe de gegevens worden opgeslagen of verwerkt — het vraagt de service alleen om deze bij te werken. Dit scheidt verantwoordelijkheden: componenten behandelen de weergave, en services behandelen de gegevens.
1. Wat is Dependency Injection (DI) in Angular?
2. Waarom werken we this.tasks bij na het aanroepen van deleteTask of toggleStatus?
Bedankt voor je feedback!
