Servisa izveide Angular

Sāksim servisu apguvi, izveidojot savu pašu. Lai to izdarītu, mapē test/src/app izveidosim failu data.service.ts. Ļaujiet mūsu servisam atbildēt par dažu datu izvadi uz ekrāna.

Izveidosim klasi mūsu servisam:

data.service.tsexport class DataService {
  
}

Tagad mums ir nepieciešams dekorators Injectable. Tā izmantošana ļaus padarīt tā, ka servisa klasi varēs ievietot komponenta klasē. Par ievietošanu mēs runāsim nākamajā nodarbībā. Tagad importēsim vajadzīgo dekoratoru:

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

export class DataService {
  
}

Pielietosim to mūsu klasei:

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

@Injectable()
export class DataService {
  
}

Tagad padarīsim tā, lai mūsu klasē būtu daži dati. Parasti Angular lietotnēs tiek ielādēti dati no servera, bet mēs mācību nolūkos izmantosim masīvu. Izveidosim to privātā īpašumā:

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

Tagad uzrakstīsim metodi datu iegūšanai:

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

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

Mūsu serviss ir gatavs. Nākamajā nodarbībā mēs to pieslēgsim komponenta klasei.

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