1

Aqui el Servicio

export class DatosService {

url:string = "https://localhost:72333/";

constructor(private http:HttpClient) { }

Enviar(form:DatosI):Observable<RespuestaI>{
let direccion = this.url + "api/datos";
return this.http.post<RespuestaI>(direccion, form);
}

}

Aquí es donde surge mi duda , como puedo almacenar el valor que contiene data para usarla en toda mi aplicación ,estuve leyendo que puede ser con promesas o @Input pero aun no lo tengo Claro, Agradecería si me pueden orientar con un ejemplo o una documentación relacionada.

 ngOnInit() {}

 Enviar(form:DatosI)
 {
  this.api.DatosRecibidos(form).subscribe(data => {
  let dataRespuesta: RespuestaI = data;
  console.log(data)
  })
 }

1 respuesta 1

0

Hay muchas formas de manejar los datos en Angular. Una forma de mantener los valores de forma global es con servicios. Si provideIntiene 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.

1
  • Muchas Gracias , me sirvio la teoria y los ejemplos para entenderlo mejor , aunque es extraño que al inicio me devolvia undifined , sera talvez algun error de typografia que te tengo que revisar, de nuevo Gracias
    – Gown
    Commented el 17 jul. 2021 a las 7:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.