Die Skepping van 'n Diens in Angular

Laat ons begin met die studie van dienste deur ons eie te skep. Om dit te doen, maak ons die lêer test/src/app genaamd data.service.ts. Laat ons diens verantwoordelik wees vir die vertoon van sekere data op die skerm.

Laat ons 'n klas maak vir ons diens:

data.service.tsexport class DataService {
  
}

Nou benodig ons die decorator Injectable. Om dit te gebruik sal toelaat dat die diensklas in die komponenteklas geinspuit kan word. Ons sal oor inspuiting praat in die volgende les. Vir nou, laat ons die nodige decorator invoer:

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

export class DataService {
  
}

Laat ons dit op ons klas toepas:

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

@Injectable()
export class DataService {
  
}

Nou maak ons dit so dat daar 'n paar data in ons klas is. Gewoonlik in Angular toepassings word data vanaf 'n bediener gelaai, maar vir opvoedkundige doeleindes sal ons 'n array gebruik. Laat ons dit in 'n private eienskap maak:

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

Laat ons nou 'n metode skryf om die data te kry:

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

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

Ons diens is gereed. In die volgende les sal ons dit aan die komponenteklas koppel.

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