observables
Observable administra datos asíncronos y algunos otros patrones útiles. Los Observables son similares a Promises pero con algunas diferencias clave. A diferencia de las Promesas, los Observables emiten múltiples valores a lo largo del tiempo. En escenarios reales, el socket web o los controladores de eventos o datos basados en tiempo real pueden emitir múltiples valores en un momento dado. En tal caso, los Observables son la mejor opción para usar.
En angular, los observables son una de las técnicas más utilizadas y se utilizan ampliamente en la integración con servicios de datos para leer una API REST. Aparte de eso, para acceder a un Observable, el componente primero debe suscribirse al Observable. Es importante hacer esto para acceder a los datos en la transferencia de estado representacional observable (REST) es un estilo arquitectónico que define un conjunto de restricciones que se utilizarán para crear servicios web. REST API es una forma de acceder a los servicios web de manera simple y flexible sin tener ningún procesamiento. Para leer más puedes navegar a este enlace.
Servicios
Los servicios se usan para crear variables/datos que se pueden compartir y se pueden usar fuera del componente en el que están definidos. Cualquier componente puede utilizar un servicio y, por lo tanto, actúa como un punto de datos común desde el que se pueden distribuir los datos a cualquier componente de la aplicación. Para leer más sobre los servicios siga este enlace .
Para agregar un servicio, escriba el siguiente comando en la consola.
ng g s ServiceName OR ng generate service ServiceName
Ejemplo:
Este es un pequeño ejemplo de un servicio llamado Datos en el que un evento que ocurre en el componente activará el método del servicio.
El código data.service.ts
Javascript
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataServiceService {
constructor() { }
clickEvent(){
console.log('Click Event');
}
}
El código app.component.ts
Javascript
import { Component } from '@angular/core';
import {DataServiceService} from './data-service.service'
@Component({
selector: 'app-root',
template: '<html>
<body>
<button (click)="clickEvent()" style="width:50px;height:30px">Button</button>
</body>
</html>',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private Data: DataService) {
}
function cEvent(){
this.Data.clickEvent()
}
}
Producción:
Servicios con Observable:
en combinación, es famoso trabajar con REST API. En el siguiente ejemplo, habrá un Servicio en el que se accederá a una API utilizando la función de solicitud GET proporcionada en HttpClientModule en Angular, que a su vez devuelve un observable. Este observable será suscrito por un componente de la aplicación y luego mostrado en la página.
Ejemplo:
El data.service.ts
Javascript
import { Injectable } from '@angular/core';
//Importing HttpClientModule for GET request to API
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
// making an instance for Get Request
constructor(private http_instance: HttpClient ) { }
// function returning the observable
getInfo(){
return this.http_instance.get('https://reqres.in/api/users')
}
}
El reg-usuario.component.ts
Javascript
import { Component, OnInit } from '@angular/core';
// Importing Data Service to subscribe to getInfo() observable
import { DataServiceService } from '../data-service.service'
@Component({
selector: 'app-reg-user',
templateUrl: './reg-user.component.html',
styleUrls: ['./reg-user.component.css']
})
export class RegUserComponent implements OnInit {
// instantiation of local object and the Data Service
inst : Object;
constructor(private data: DataServiceService ) { }
//Subscription of the Data Service and putting all the
// data into the local instance of component
ngOnInit() {
this.data.getInfo().subscribe((data)=>{
this.inst=data;
})
}
}
Las directivas utilizadas en Html de RegUserComponent
Javascript
<style>
ul {
list-style-type: none;
margin: 0;padding: 0;
}
ul li {
background: rgb(238, 238, 238);
padding: 2em;
border-radius: 4px;
margin-bottom: 7px;
display: grid;
grid-template-columns: 60px auto;
}
ul li p {
font-weight: bold;
margin-left: 20px;
}
ul li img {
border-radius: 50%;
width: 100%;
}
</style>
<h1>Users</h1>
<ul *ngIf="inst">
<li *ngFor="let user of inst.data">
<img [src]="user.avatar">
<p>{{ user.first_name }} {{ user.last_name }}</p>
</li>
</ul>
Producción:
Acceso a la API
Para ejecutar esta aplicación, migre dentro del proyecto y ejecute el siguiente comando.
cd < Project Path > ng serve -o
Publicación traducida automáticamente
Artículo escrito por piyush25pv y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA