Service сохта дар Angular

Биёед омӯзиши service-ҳоро бо сохтани service-и фардии худ оғоз кунем. Барои ин дар пӯшаи test/src/app файли data.service.ts месозем. Бигзор service-и мо барои чоп кардани баъзе маълумот ба экран масъул бошад.

Классро барои service-и мо созем:

data.service.tsexport class DataService {
  
}

Ҳоло ба декоратори Injectable ниёз дорем. Истифодаи он имкон медиҳад, ки класси service-ро ба синфи componentворид кардан мумкин бошад. Мо дар бораи воридкунӣ дар дарси оянда сӯҳбат хоҳем кард. Ва ҳоло аз кофии зарурӣ ворид мекунем:

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

export class DataService {
  
}

Онро ба синфи мо истифода барем:

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

@Injectable()
export class DataService {
  
}

Ҳоло чунон мекунем, ки дар синфи мо баъзе маълумот бошад. Одатан дар барномаҳои Angular бор кардани маълумот аз сервер сурат мегирад, аммо мо барои мақсадҳои таълимӣ массив истифода мебарем. Онро дар хосияти хусусӣ месозем:

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

Ҳоло методро барои гирифтани маълулот менависем:

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

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

Service-и мо омода аст. Дар дарси оянда мо онро ба синфи component пайваст хоҳем кард.

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