Angular7 - Servicios

Podríamos encontrarnos con una situación en la que necesitemos que se use algún código en todas partes de la página. Por ejemplo, puede ser para conexiones de datos que deben compartirse entre componentes. Esto se logra con la ayuda de Servicios. Con los servicios, podemos acceder a métodos y propiedades en otros componentes de todo el proyecto.

Para crear un servicio, necesitamos hacer uso de la línea de comando como se indica a continuación:

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)

Los archivos creados en la carpeta de la aplicación son los siguientes:

Los siguientes son los archivos creados que se muestran en la parte inferior: myservice.service.specs.ts y myservice.service.ts.

myservice.service.ts

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

Aquí, el módulo inyectable se importa desde @ angular / core. Contiene el método @Injectable y una clase llamada MyserviceService. Crearemos nuestra función de servicio en esta clase.

Antes de crear un nuevo servicio, debemos incluir el servicio creado en el padre principal. 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 { }

Hemos importado el Servicio con el nombre de la clase y la misma clase se usa en los proveedores. Volvamos ahora a la clase de servicio y creemos una función de servicio.

En la clase de servicio, crearemos una función que mostrará la fecha de hoy. Podemos usar la misma función en el componente principal app.component.ts y también en el nuevo componente new-cmp.component.ts que creamos en el capítulo anterior.

Veamos ahora cómo se ve la función en el servicio y cómo usarla en componentes.

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

En el archivo de servicio anterior, hemos creado una función showTodayDate. Ahora devolveremos la nueva Fecha () creada. Veamos cómo podemos acceder a esta función en la clase de componente.

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

La función ngOnInit se llama por defecto en cualquier componente creado. La fecha se obtiene del servicio como se muestra arriba. Para obtener más detalles del servicio, primero debemos incluir el servicio en el archivo ts del componente.

Mostraremos la fecha en el archivo .html como se muestra a continuación:

app.component.html

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

Veamos ahora cómo utilizar el servicio en el nuevo componente creado.

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

En el nuevo componente que hemos creado, primero debemos importar el servicio que queremos y acceder a los métodos y propiedades del mismo. Verifique el código resaltado. todaydate se muestra en el componente html de la siguiente manera:

new-cmp.component.html

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

El selector del nuevo componente se utiliza en el archivo app.component.html. El contenido del archivo html anterior se mostrará en el navegador como se muestra a continuación:

Si cambia la propiedad del servicio en cualquier componente, también se cambia en otros componentes. Veamos ahora cómo funciona esto.

Definiremos una variable en el servicio y la usaremos en el componente principal y en el nuevo. Nuevamente cambiaremos la propiedad en el componente padre y veremos si la misma se cambia en el nuevo componente o no.

En myservice.service.ts, hemos creado una propiedad y usamos la misma en otro componente padre y nuevo.

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

Usemos ahora el servicepropertyvariable en otros componentes. Enapp.component.ts, estamos accediendo a la variable de la siguiente manera:

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

Ahora buscaremos la variable y trabajaremos en console.log. En la siguiente línea, cambiaremos el valor de la variable a "componente creado". Haremos lo mismo en 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; 
   } 
}

En el componente anterior, no cambiamos nada, sino que asignamos directamente la propiedad a la propiedad del componente.

Ahora, cuando lo ejecute en el navegador, la propiedad del servicio cambiará ya que el valor de la misma se cambia en app.component.ts y lo mismo se mostrará para new-cmp.component.ts.

También verifique el valor en la consola antes de cambiarlo.

Aquí están los archivos app.component.html y 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>

↰ Previous page Next page ↱