0

La idea es ir sumando la cantidad de productos que hay en el carrito de compras. Para esto tengo mi servicio cart.service.ts con la siguiente funcion:

private bookArray: Book[] = [];
public cart = new BehaviorSubject<Book[]>([]);
public cart$ = this.cart.asObservable();

  constructor() { }

  addCart(book: Book){
    this.bookArray = [...this.bookArray, book];
    this.cart.next(this.bookArray);
  }

Ahora muestro el total de productos que hay en el carrito desde el component.uno.ts de la siguiente manera:

total$: Observable<number>;

  constructor(
    private breakpointObserver: BreakpointObserver,
    private cartService: CartService
    ) {
        this.total$ = this.cartService.cart$
         .pipe(
           map(libros => libros.length)
         );
      }
      
     ngOnInit(): void {       
    }  

Aca muestro el resultado en la view component.uno.html

 <a class="btn-carrito" mat-raised-button color="warn" [matBadge]="total$ | async" matBadgeColor="warn">
    <mat-icon class="icon-shopping-cart">shopping_cart</mat-icon>
    Carrito
 </a>

Esto funciona, pero si se refresca la página, los datos del total de productos en el carrito se pierden. Una forma de evitar esto seria usando por ejemplo localStorage, pero tengo entendido o mal entendido, que con la programación reactiva no seria necesario.

1
  • 2
    No, la programación reactiva no guarda datos si se refresca la página angular.io/guide/rx-library, si quieres mantenerlo puedes almacenarlos en el localstorage o en un servidor a través de tu backend. el 20 nov. 2020 a las 18:34

1 respuesta 1

0

si se refresca la página, los datos del total de productos en el carrito se pierden. Una forma de evitar esto seria usando por ejemplo localStorage, pero tengo entendido o mal entendido, que con la programación reactiva no seria necesario.

La programación reactiva es un paradigma de programación asincrónica que se ocupa de los flujos de datos y la propagación del cambio de estados en tu aplicación.

Esto no tiene que ver con la persistencia de dicho estado.

Para mantener los datos de tu carrito de compras puedes hacer uso del localstorage como forma de almacenamiento. De igual manera, si el usuario elimina los datos de navegación de su navegador, se perderá todo lo que hayas guardado allí.

Un ejemplo del uso del localstorage para guardar los datos del carrito seria:

addCart(book: Book){
    let savedBooks = [];
    if(localStorage.getItem('books')){
        savedBooks = JSON.parse(localStorage.getItem('books'));
    }
    savedBooks.push(book);
    localStorage.setItem('books', JSON.stringify(savedBooks));
    this.cart.next(this.bookArray);
  }

Para el código de arriba me base en esta respuesta https://stackoverflow.com/a/55328889/8179980

Espero te sirva

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.