Pek çok farklı framework’ ün de sunduğu dependency injection özelliğine, Angular için https://gelistir.net/374/angular-service-ve-dependency-injection/ adresinde değinmiştik.

Bu başlıkta ise Hiyerarşi‘ sine değineceğiz.

Angular’ da dependency injection tepeden aşağı ilerleyen bir yapıdadır. Bir service’ i nerede inject ettiyseniz, o bileşenin altındaki tüm bileşenlerde, AYNI state‘ e sahip olarak yaşamını sürdürebilir.
Lakin bu durum overwrite edilebilir.
Bu seçenek decorator‘ ün providers özniteliğinde belirleniyor.

Service’ in providers’ a eklendiği durum;

  • Eğer ilgili service, eklendiği bileşende, providers’ a da eklenirse, bileşen kendi scope’ un da bu service’ den yeni bir instance istiyorum demiş oluyor. Ve kendisi için yeni bir instance elde ediliyor. State’ i tamamen sıfırdan oluşturulan.

Service’ in providers’ a eklenMediği durum;

  • Bu durumda, service’ in instance’ ı, kendisinin hiyerarşik olarak üstünde olan bir bileşende yaratıldıysa, birebir aynı state‘ i ile ORTAK kullanılıyor.

ÖRNEK

  • 3 adet component’ imiz ve 1 adet loggingService olacak.

  • Componentler; AppComponent, içerisinde AltComponent ve onun da template’ i içerisinde enAltComponent olacak.

  • Lakin enAltComponent, providers özniteliğinde, ilgili Service’ i belirtecek ve bu sayede yeni bir instance elde etmiş olacak.

  • LoggingService;

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

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

  messages = [
    'mesaj 1',
    'mesaj 2'
  ];

  constructor() {
  }

  addMessage() {
    this.messages.push('yeni bir mesaj');
  }

}
  • messages isminde bir dizi ve içerisinde mesajlar var.

  • yeni bir mesaj eklemeye imkan tanıyan addMessage metodu var.

  • AppComponent;

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers : [LoggingService]
})
export class AppComponent implements OnInit {

  messages = [];

  constructor(private logging: LoggingService) {

  }

  ngOnInit() {
    this.messages = this.logging.messages;
  }

  addMessage() {
    this.logging.addMessage();
  }

}
  • onInit anında, messages özniteliğine, service’ teki messages dizisini set ediyor. Ve bir de addMessage metodu var ki, service’ in addMessage metodunu tetikleyip, service’ in messages özniteliğinde yeni bir mesaj eklenmesini sağlıyor.

  • AppComponent template;

<div class="container">

  <div class="row">

    <h1>App Component</h1>

    <button class="btn btn-primary" (click)="addMessage()">yeni mesaj ekle</button>

    <ul>
      <li *ngFor = "let message of messages">
        {{message}}
      </li>
    </ul>

    <app-alt></app-alt>

  </div>

</div>
  • Mesajlar listeleniyor. Ve mesaj eklemeyi sağlayan addMessage metodu için buton var. app-alt selector’ ü AltComponent’ i barındırıyor.

  • AltComponent, overwrite etmiyor, ve sadece mesajları listeliyor.

  • enAltComponent ise, aşağıdaki şekilde providers’ a service’ i ekliyor. Ve kendisine yeni bir instance elde etmiş oluyor;

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

@Component({
  selector: 'app-enalt',
  templateUrl: './enalt.component.html',
  styleUrls: ['./enalt.component.css'],
  providers: [LoggingService]
})
export class EnaltComponent implements OnInit {

  messages = [];

  constructor(private logging: LoggingService) { }

  ngOnInit() {
    this.messages = this.logging.messages;
  }

}
  • AppComponent‘ teki butona tıklayınca, sadece AppComponent ve AltComponent‘ te ortak kullanılan service instance‘ ında ilgili mesaj oluşturuluyor.

  • EnAltComponent‘ in oluşturttuğu service instance’ ı ise, diğerinden farklı olduğu için bu değişikliğe doğal olarak sahip değil ve yeni mesajı listelemiyor.

Canlı Örnek

Yeni mesaj ekle butonuna bastığınızda, SADECE AppComponent ve AltComponent’ te değişiklik olduğunu lakin EnAltComponent’ te olmadığını göreceksiniz.

Last modified: 13 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.