Kuingiza Huduma Moja Ndani ya Nyingine Katika Angular

Ili kufanya kazi kwenye mradi, tunaweza kuhitaji kuingiza huduma moja ndani ya nyingine, ili kupanua utendaji wake. Hebu tufanye huduma nyingine, ambayo itakuwa inatoa ujumbe katika koni wakati wa kuongeza data mpya.

Kwanza, katika folda test/src/app tunaunda faili log.service.ts. Tunatoa nje darasa LogService, ambacho tutaandika kitendo write cha kutoa ujumbe katika koni:

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

@Injectable()
export class LogService {
  write(message: string) {
    console.log(message);
  }
}

Ifuatayo, tunaingia kwenye huduma yetu DataService na kuingiza, kuingiza kwa kutumia mshipa na kutumia huduma yetu mpya:

app/data.service.tsimport { Injectable } from '@angular/core';
import { LogService } from './log.service'; // kuingiza

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // kuingiza kwa kutumia mshipa
    
  }
  
  getData(): string[] {
    this.logService.write('data imepokelewa'); // kutumia
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('kipengee kipya kimeongezwa'); // kutumia
  }
}

Hata hivyo, hii haitoshi. Inahitajika pia kuandika huduma mpya na katika darasa la sehemu, ingawa haitumiki moja kwa moja huko:

app/app.component.tsimport { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // kuingiza

@Component({
  ........
  providers: [DataService, LogService] // kuongeza
})