Servicios en Angular

Que son los servicios

Es el mecanismo que sirve para compartir funcionalidad entre componentes, es decir podemos acceder a métodos y propiedades a través de otros componentes en todo el proyecto.

Crear un servicio

Creamos un servicio utilizando el siguiente comando:

ng g service myservice

En el imports de app.module.ts:

·         Importamos el servicio

import { MyserviceService } from './myservice.service';

·         Y lo insertamos en el providers:

providers: [MyserviceService]

 

myservice.service.ts:

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

@Injectable({

  providedIn: 'root'

})

export class MyserviceService {

constructor() { }

}

Vamos a crear nuestra función de servicio en esta clase, aquí en el código vemos que el módulo inyectable se importa desde @ angular / core y además contiene el decorador de clase @Injectable.

Vamos a crear una función que devolverá un nombre:

myservice.service.ts:

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

@Injectable({

  providedIn: 'root'

})

export class MyserviceService {

  constructor() { }

 mostrarNombre() {

   const nombre = 'Juan';

   return nombre;

 }

}

En el archivo de servicio anterior, hemos creado una función mostrarNombre(), donde vamos a devolver el nombre creado.

 

app.component.ts:

import { Component, OnInit } from '@angular/core';

import { MyserviceService } from 'src/app/myservice.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

 titulo = 'Bienvenido a angular';

 nombre: string;

 constructor(private miServicio: MyserviceService) {

  }

 ngOnInit() {

  this.nombre = this.miServicio.mostrarNombre();

}

}

La función ngOnInit forma parte del ciclo de vida de Angular y es lanzado cuando se ha completado la creación del componente.

Inyectamos en el constructor el servicio creado, y obtenemos el nombre de la variable miServicio y hacemos una interpolación con la variable nombre al código HTML.

app.component.html:

<p> Mi nombre es: {{nombre}} </p>