Angular 4 - Servicios

En este capítulo, discutiremos los servicios en Angular 4.

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. Puede ser para la conexión de datos que debe compartirse entre componentes, etc. Los servicios nos ayudan a lograrlo. 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. El comando para lo mismo es:

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

Los archivos se crean en la carpeta de la aplicación de la siguiente manera:

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

myservice.service.ts

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

@Injectable()
export class MyserviceService {
   constructor() { }
}

Aquí, el módulo Inyectable se importa del @angular/core. Contiene el@Injectable método 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 { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   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 principalapp.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()
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 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

los ngOnInitLa función 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 componentets archivo.

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

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

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

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;
   newcomponent = "Entered in new component created";
   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. Consulte el código resaltado. La fecha de hoy se muestra en el componente html de la siguiente manera:

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

El selector del nuevo componente se utiliza en el app.component.htmlarchivo. 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()
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 4 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 "component created”. Haremos lo mismo ennew-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 el new-cmp.component.ts.

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