Skapa en service i Angular

Låt oss börja studera tjänster genom att skapa vår egen. För att göra detta, skapa filen test/src/app/data.service.ts i mappen test/src/app. Låt vår tjänst ansvara för att visa viss data på skärmen.

Låt oss skapa en klass för vår tjänst:

export class DataService {
	
}

Nu behöver vi dekoratören Injectable. Genom att använda den kan vi göra så att tjänstklassen kan injicerass i komponentklassen. Vi kommer att prata om injicering i nästa lektion. Låt oss först importera den nödvändiga dekoratören:

import { Injectable } from '@angular/core';

export class DataService {
	
}

Låt oss applicera den på vår klass:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
	
}

Låt oss nu se till att det finns någon data i vår klass. I Angular-applikationer hämtas vanligtvis data från en server, men för utbildningsändamål kommer vi att använda en array. Låt oss skapa den i en privat egenskap:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

Låt oss nu skriva en metod för att hämta data:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

Vår tjänst är klar. I nästa lektion kommer vi att ansluta den till en komponentklass.

Skapa din egen tjänst som returnerar en array med produktobjekt:

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]