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:

data.service.tsexport 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:

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

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

data.service.tsimport { 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:

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

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

data.service.tsexport 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.

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