Oprettelse af en service i Angular

Lad os starte med at studere services ved at oprette vores egen. For at gøre dette, i mappen test/src/app, laver vi filen data.service.ts. Lad vores service stå for at vise visse data på skærmen.

Lad os oprette en klasse for vores service:

data.service.tsexport class DataService {
  
}

Nu har vi brug for dekoratøren Injectable. At anvende den vil gøre det muligt at injicere serviceklassen i komponentklassen. Vi taler om injektion i næste lektion. For nu importerer vi den nødvendige dekoratør:

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

export class DataService {
  
}

Lad os anvende den på vores klasse:

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

@Injectable()
export class DataService {
  
}

Lad os nu gøre sådan, at der er nogle data i vores klasse. I Angular-applikationer loader man normalt data fra en server, men af undervisningsmæssige grunde vil vi bruge et array. Lad os oprette det i en privat egenskab:

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

Lad os nu skrive en metode til at hente data:

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

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

Vores service er klar. I den næste lektion vil vi forbinde den til en komponentklasse.

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