Angular7 - Hizmetler

Sayfanın her yerinde kullanılmak üzere bazı kodlara ihtiyaç duyduğumuz bir durumla karşılaşabiliriz. Örneğin, bileşenler arasında paylaşılması gereken veri bağlantısı için olabilir. Bu, Hizmetlerin yardımıyla elde edilir. Hizmetler ile, tüm projedeki diğer bileşenlerdeki yöntemlere ve özelliklere erişebiliriz.

Bir hizmet oluşturmak için, aşağıda verilen komut satırını kullanmamız gerekir -

ng g service myservice

C:\projectA7\angular7-app>ng g service myservice 
CREATE src/app/myservice.service.spec.ts (348 bytes) 
CREATE src/app/myservice.service.ts (138 bytes)

Uygulama klasöründe oluşturulan dosyalar aşağıdaki gibidir -

Aşağıda, myservice.service.specs.ts ve myservice.service.ts - gösterilen oluşturulan dosyalar verilmiştir.

myservice.service.ts

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root' 
}) 
export class MyserviceService {
   constructor() { }
}

Burada, enjekte edilebilir modül @ angular / core'dan içe aktarılır. @Injectable yöntemini ve MyserviceService adlı bir sınıfı içerir. Hizmet fonksiyonumuzu bu sınıfta oluşturacağız.

Yeni bir hizmet oluşturmadan önce, ana ebeveynde oluşturulan hizmeti eklememiz gerekir. app.module.ts.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Hizmeti sınıf adıyla içe aktardık ve sağlayıcılarda aynı sınıf kullanılıyor. Şimdi servis sınıfına geri dönelim ve bir servis fonksiyonu oluşturalım.

Servis sınıfında bugünün tarihini gösterecek bir fonksiyon oluşturacağız. Ana ana bileşen olan app.component.ts'de ve ayrıca önceki bölümde oluşturduğumuz yeni-cmp.component.ts bileşeninde aynı işlevi kullanabiliriz.

Şimdi fonksiyonun hizmette nasıl göründüğünü ve bileşenlerde nasıl kullanılacağını görelim.

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
export class MyserviceService { 
   constructor() { } 
   showTodayDate() { 
      let ndate = new Date(); 
      return ndate; 
   }  
}

Yukarıdaki servis dosyasında bir fonksiyon oluşturduk showTodayDate. Şimdi oluşturulan yeni Date () 'i geri getireceğiz. Bu işleve bileşen sınıfında nasıl erişebileceğimizi görelim.

app.component.ts

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';
@Component({ selector: 'app-root', 
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

NgOnInit işlevi, oluşturulan herhangi bir bileşende varsayılan olarak çağrılır. Tarih, yukarıda gösterildiği gibi hizmetten alınır. Hizmetin daha fazla ayrıntıını almak için, önce hizmeti bileşen ts dosyasına eklememiz gerekir.

Tarihi .html dosyasında aşağıda gösterildiği gibi görüntüleyeceğiz -

app.component.html

{{todaydate}} 
<app-new-cmp></app-new-cmp>

Şimdi oluşturulan yeni bileşende servisin nasıl kullanılacağını görelim.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core'; 
import { MyserviceService } from './../myservice.service';

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit { 
   newcomponent = "Entered in new component created"; 
   todaydate; 
   constructor(private myservice: MyserviceService) { }
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

Oluşturduğumuz yeni bileşende, öncelikle istediğimiz hizmeti içeri aktarmamız ve bunun yöntem ve özelliklerine erişmemiz gerekiyor. Vurgulanan kodu kontrol edin. todaydate html bileşeninde aşağıdaki gibi görüntülenir -

new-cmp.component.html

<p> 
   {{newcomponent}} 
</p> 
<p> 
   Today's Date : {{todaydate}} 
</p>

Yeni bileşenin seçicisi app.component.html dosyasında kullanılır. Yukarıdaki html dosyasındaki içerik, aşağıda gösterildiği gibi tarayıcıda görüntülenecektir -

Herhangi bir bileşende hizmetin özelliğini değiştirirseniz, aynı şey diğer bileşenlerde de değişir. Şimdi bunun nasıl çalıştığını görelim.

Serviste bir değişken tanımlayacağız ve onu üst ve yeni bileşende kullanacağız. Üst bileşendeki özelliği yeniden değiştireceğiz ve aynı şeyin yeni bileşende değiştirilip değiştirilmediğini göreceğiz.

İçinde myservice.service.ts, bir mülk oluşturduk ve aynısını diğer üst ve yeni bileşende kullandık.

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
export class MyserviceService { 
   serviceproperty = "Service Created"; 
   constructor() { } 
   showTodayDate() { 
      let ndate = new Date(); 
      return ndate; 
   } 
}

Şimdi kullanalım servicepropertydiğer bileşenlerde değişken. İçindeapp.component.ts, değişkene aşağıdaki gibi erişiyoruz -

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   todaydate; 
   componentproperty; 
   constructor(private myservice: MyserviceService) {} 
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
      console.log(this.myservice.serviceproperty); 
      this.myservice.serviceproperty = "component created"; 
      // value is changed. this.componentproperty = 
      this.myservice.serviceproperty; 
   } 
}

Şimdi değişkeni getirip console.log üzerinde çalışacağız. Sonraki satırda, değişkenin değerini "oluşturulan bileşen" olarak değiştireceğiz. Aynı şeyi new-cmp.component.ts'de de yapacağız.

import { Component, OnInit } from '@angular/core'; 
import { MyserviceService } from './../myservice.service';
@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
})
export class NewCmpComponent implements OnInit { 
   todaydate;
   newcomponentproperty; newcomponent = "Entered in 
   newcomponent"; constructor(private myservice: 
   MyserviceService) {} 
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
      this.newcomponentproperty = 
      this.myservice.serviceproperty; 
   } 
}

Yukarıdaki bileşende, hiçbir şeyi değiştirmiyoruz, ancak özelliği doğrudan bileşen özelliğine atıyoruz.

Şimdi tarayıcıda çalıştırdığınızda, app.component.ts'de değeri değiştiğinden hizmet özelliği değiştirilecek ve aynısı new-cmp.component.ts için görüntülenecektir.

Ayrıca değiştirilmeden önce konsoldaki değeri kontrol edin.

İşte app.component.html ve new-cmp.component.html dosyaları -

app.component.html

<h3>{{todaydate}}>/h3> 
<h3> Service Property : {{componentproperty}} </h3> 
<app-new-cmp></app-new-cmp>

new-cmp.component.html

<h3>{{newcomponent}} </h3> 
<h3> Service Property : {{newcomponentproperty}} </h3> 
<h3> Today's Date : {{todaydate}} </h3>