Hay muchas formas de manejar los datos en Angular. Una forma de mantener los valores de forma global es con servicios. Si provideIn
tiene como valor root
se podría accedes desde toda la aplicación sin ningún problema.
Dentro de éste mismo servicio se puede almacenar dentro de una propiedad como una variable de tipo RespuestaI
o como en un BehavorSubject
si se quiere mantener una arquitectura más acorde con RxJS. Así sería un tipo RespuestaI
:
export class DatosService {
url:string = "https://localhost:72333/";
respuesta: RespuestaI;
constructor(private http:HttpClient) { }
Enviar(form:DatosI):Observable<RespuestaI>{
let direccion = this.url + "api/datos";
return this.http.post<RespuestaI>(direccion, form).pipe(
map(respuesta => this.respuesta = respuesta)
);
}
}
De esa forma en cualquier componente que tenga inyectado el servicio DatosService
se podría acceder a éste valor.
Usando RxJS puede ser hecho de muchas formas, una de ellas es usando un BehaviourSubject o un ReplaySubject, de la siguiente forma:
export class DatosService {
url:string = "https://localhost:72333/";
respuesta: BehaviorSubject<RespuestaI> = new BehaviorSubject(null);
constructor(private http:HttpClient) { }
Enviar(form:DatosI):Observable<RespuestaI>{
let direccion = this.url + "api/datos";
return this.http.post<RespuestaI>(direccion, form).pipe(
map(respuesta => this.respuesta.next(respuesta))
);
}
}
Usando BehaviourSubject o un ReplaySubject es posible subscribirse desde cualquier componente o servicio que tenga inyectado DatosService, lo que permitiría que si es usado en mútiples partes de la app todas se actualizarían solamente con hacer la petición. Hay varias formas de aplicarlo pero esa es una explicaciín sencilla. Un ejeplo de cómo usarlo sería:
this.datosService.respuesta.subscribe(respuesta => {
// lógica aquí
)
Y también puede ser usado en un template:
En el component.ts
this.respuesta = this.datosService.respuesta;
En el html
<div>{{ respuesta | async }}<div>
Una vez usado el pipe async se pueden obtener todos sus atributos, usar otro pipe para modelar los datos o usar un map de RxJS almacenado en otra variable del componente.
Otro método es usar una librería de manejo de estado como NgRx pero no tengo mucha experiencia con esa librería.