Opprettelse av en tjeneste i Angular

La oss starte studiet av tjenester med å opprette vår egen. For å gjøre dette, i mappen test/src/app, lager vi filen data.service.ts. La vår tjeneste være ansvarlig for å vise noen data på skjermen.

La oss lage en klasse for vår tjeneste:

data.service.tsexport class DataService {
  
}

Nå trenger vi dekoratøren Injectable. Bruken av den vil gjøre det slik at tjenesteklassen kan injiseres inn i komponentklassen. Vi skal snakke om injisering i neste leksjon. For nå importerer vi nødvendig dekoratør:

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

export class DataService {
  
}

La oss bruke den på vår klasse:

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

@Injectable()
export class DataService {
  
}

La oss nå gjøre det slik at det er noen data i klassen vår. Vanligvis i Angular-applikasjoner skjer lasting av data fra en server, men for opplæringsformål vil vi bruke en array. La oss lage den i en privat egenskap:

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

La oss nå skrive en metode for å hente data:

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

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

Vår tjeneste er klar. I neste leksjon vil vi koble den til komponentklassen.

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