Angular Service içine başka bir Service Inject etmek

Angular’ da bir service oluştururken, başka bir service’ i de onun içinde kullanmak isteyebilirsiniz.
Bunu gerçekleştirebilmek için, kavraması çok BASİT olan Angular Service Hiyerarşisi‘ ni bilmeniz gerekiyor. bknz : https://gelistir.net/461/angular-dependency-injection-hiyerarsi-si/

Bir Service’ i kullanabilmeniz için, service’ in çalıştığınız bileşende yada bir üst bileşende tanımlı olması gerekiyor. Service’ lerin kendisi component ler gibi, direk olarak bir modüle bağlı olmadığından, bir service’ in başka bir service içerisinde kullanılabilir olması için, kullanılacak service‘ in en üst module’ de import edilip, providers özniteliğine eklenmiş olması gerekiyor.

AYRICA,

Bir Service’ in HERHANGİ birşey in içine inject edilebilmesi için, o ŞEY’ in bir decorator’ e sahip olması gerekir. bknz : https://gelistir.net/411/angular-notlar/#Service

1 Adet Component ve 2 adet service ile çalışacağız.

NG CLI ile Service oluşturmak için bknz : https://gelistir.net/168/angular-cli-komutlari/#ng_g_service_serviceIsmi

• Logging Service;

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoggingService {

  constructor() { }

  log(data) {
    console.log('logged: ' + data);
  }

}

• Logging Service, log metodu ile kendisine gönderilen data’ yı tarayıcının console’ un da loglar.

• Account Service , register metoduna gönderilen üyelik bilgilerini bir dizi içerisine eklemeyi yapar. Ekleme yaptıktan sonrada, LoggingService‘ i kullanarak console’ da log basılmasını sağlar. Yani başka bir Service’ i kullanır. Bunun mümkün olabilmesi için öncelikle LoggingService’ i en üst module olan AppModule‘de import ediyoruz ve providers’ a ekliyoruz;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import {LoggingService} from './services/logging.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [LoggingService],
  bootstrap: [AppComponent]
})
export class AppModule { }

• AccountService‘ in constructor metodunda, LoggingService’ ten bir instance istediğimizi belirtiyor ve register metodunda da log metodunu kullanıyoruz;

import { Injectable } from '@angular/core';
import { LoggingService } from './logging.service';

@Injectable({
  providedIn: 'root'
})
export class AccountService {

  members = [];

  constructor(private logging: LoggingService) { }

  register(member) {
    this.members.push(member);
    this.logging.log('Saved : ' + member.email);
  }

}

• AppComponent‘ in Template’ i;

<div class="container">

  <div class="row">

        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email" [(ngModel)] = "member.email">
        </div>

        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" [(ngModel)] = "member.password">
        </div>

        <button type="submit" class="btn btn-default" (click) = "register()">Submit</button>

  </div>

</div>

• Email ve password değerleri member modeline bağlanıyor. Submit ile AppComponent’ in register metodu tetikleniyor;

import { Component, OnInit } from '@angular/core';
import { AccountService } from './services/account.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers : []
})

export class AppComponent {

  member = {};

  constructor(private accountService: AccountService) {

  }

  register() {
    this.accountService.register(this.member);
  }

}

• AccountService’ in register metodu tetikleniyor. Hem üye ilgili diziye ekleniyor hemde LoggingService’ in log metodu tetikleniyor.

CANLI ÖRNEK;

• Sağ alttan console’ u açmayı unutmayın.