Angular7 - Usługi

Możemy natknąć się na sytuację, w której będziemy potrzebować kodu, który będzie używany w każdym miejscu strony. Na przykład może to dotyczyć połączenia danych, które musi być współużytkowane przez komponenty. Osiąga się to za pomocą usług. Dzięki usługom możemy uzyskać dostęp do metod i właściwości w innych komponentach w całym projekcie.

Aby utworzyć usługę, musimy skorzystać z wiersza poleceń, jak podano poniżej -

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)

Pliki utworzone w folderze aplikacji są następujące -

Poniżej znajdują się utworzone pliki, które są wyświetlane na dole - myservice.service.specs.ts i myservice.service.ts.

myservice.service.ts

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

W tym przypadku moduł do wstrzykiwania jest importowany z @ angular / core. Zawiera metodę @Injectable i klasę o nazwie MyserviceService. W tej klasie stworzymy naszą funkcję serwisową.

Przed utworzeniem nowej usługi musimy uwzględnić usługę utworzoną w głównym rodzicu 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 { }

Zaimportowaliśmy usługę z nazwą klasy i ta sama klasa jest używana w dostawcach. Wróćmy teraz do klasy usług i utwórzmy funkcję usługi.

W klasie serwisowej stworzymy funkcję wyświetlającą dzisiejszą datę. Możemy użyć tej samej funkcji w głównym komponencie nadrzędnym app.component.ts, a także w nowym komponencie new-cmp.component.ts, który stworzyliśmy w poprzednim rozdziale.

Zobaczmy teraz, jak funkcja wygląda w usłudze i jak jej używać w komponentach.

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

W powyższym pliku usługi utworzyliśmy funkcję showTodayDate. Teraz zwrócimy nową utworzoną datę (). Zobaczmy, jak możemy uzyskać dostęp do tej funkcji w klasie komponentów.

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(); 
   } 
}

Funkcja ngOnInit jest wywoływana domyślnie w każdym utworzonym komponencie. Data jest pobierana z usługi, jak pokazano powyżej. Aby pobrać więcej szczegółów usługi, musimy najpierw dołączyć usługę do pliku ts komponentu.

Wyświetlimy datę w pliku .html, jak pokazano poniżej -

app.component.html

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

Zobaczmy teraz, jak korzystać z usługi w nowo utworzonym komponencie.

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(); 
   } 
}

W nowym komponencie, który stworzyliśmy, musimy najpierw zaimportować żądaną usługę i uzyskać dostęp do jej metod i właściwości. Sprawdź podświetlony kod. dzisiejsza data jest wyświetlana w html komponentu w następujący sposób -

new-cmp.component.html

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

Selektor nowego komponentu jest używany w pliku app.component.html. Zawartość powyższego pliku html zostanie wyświetlona w przeglądarce, jak pokazano poniżej -

Jeśli zmienisz właściwość usługi w dowolnym komponencie, zmieni się to również w innych komponentach. Zobaczmy teraz, jak to działa.

Zdefiniujemy jedną zmienną w usłudze i użyjemy jej w rodzicu i nowym komponencie. Ponownie zmienimy właściwość w komponencie nadrzędnym i zobaczymy, czy to samo zostało zmienione w nowym komponencie, czy nie.

W myservice.service.ts, stworzyliśmy właściwość i użyliśmy jej w innym nadrzędnym i nowym komponencie.

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

Użyjmy teraz servicepropertyzmienna w innych składnikach. Wapp.component.ts, uzyskujemy dostęp do zmiennej w następujący sposób -

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; 
   } 
}

Teraz pobierzemy zmienną i będziemy pracować na console.log. W następnym wierszu zmienimy wartość zmiennej na „utworzony komponent”. Zrobimy to samo w 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 { 
   todaydate;
   newcomponentproperty; newcomponent = "Entered in 
   newcomponent"; constructor(private myservice: 
   MyserviceService) {} 
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
      this.newcomponentproperty = 
      this.myservice.serviceproperty; 
   } 
}

W powyższym komponencie nic nie zmieniamy, ale bezpośrednio przypisujemy właściwość do właściwości komponentu.

Teraz, gdy uruchomisz go w przeglądarce, właściwość usługi zostanie zmieniona, ponieważ jej wartość zostanie zmieniona w app.component.ts i to samo zostanie wyświetlone dla nowego-cmp.component.ts.

Sprawdź również wartość w konsoli, zanim zostanie zmieniona.

Oto pliki app.component.html i new-cmp.component.html -

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>