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 aan componenten te koppelen 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 zelf geen instanties van services aan — ze ontvangen eenvoudigweg een reeds aangemaakte instantie. Angular zorgt ervoor dat de benodigde objecten worden geleverd 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 applicatie te creëren en deze beschikbaar te stellen voor DI.
Service injecteren in een component
Nu gaan we de TaskService injecteren in de TaskListComponent, zodat deze de takenlijst kan ophalen en ermee kan werken.
Hier ziet u hoe de componentcode eruitziet:
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 componentmethoden. 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 data wordt opgeslagen of verwerkt — het vraagt alleen aan de service om deze bij te werken. Dit scheidt verantwoordelijkheden: componenten beheren de weergave, en services beheren de data.
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 aan componenten te koppelen 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 zelf geen instanties van services aan — ze ontvangen eenvoudigweg een reeds aangemaakte instantie. Angular zorgt ervoor dat de benodigde objecten worden geleverd 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 applicatie te creëren en deze beschikbaar te stellen voor DI.
Service injecteren in een component
Nu gaan we de TaskService injecteren in de TaskListComponent, zodat deze de takenlijst kan ophalen en ermee kan werken.
Hier ziet u hoe de componentcode eruitziet:
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 componentmethoden. 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 data wordt opgeslagen of verwerkt — het vraagt alleen aan de service om deze bij te werken. Dit scheidt verantwoordelijkheden: componenten beheren de weergave, en services beheren de data.
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!
