Chaque objet accédé retourne un nouvel objet

Question

Je travaille sur une application de commerce électronique et j'ai du mal à créer un objet singleton que je peux utiliser comme panier de mon application.

D'abord, je créé un service:

import {Injectable} from '@angular/core'; 
import {Item} from '../models/item'; 

@Injectable() 
export class CartService { 

    private items: Item[]; 

    constructor() { 
     this.items = []; 
    } 

    public addToCart(item: Item): string { 
     ... 
    } 

    public getItems(): Item[] { 
     return this.items; 
    } 
} 

puis dans mes app.module.ts:

import { CartService } from '../services/cart.service'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    ... 
    ], 
    imports: [ 
    ... 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    ... 
    ], 
    providers: [ 
    ... 
    CartService 
    ] 
}) 
export class AppModule {} 

Maintenant, je veux avoir les cartService.getItems comme un tableau singleton d'articles, donc je fais:

@IonicPage({ 
    name: 'destaques-page' 
}) 
@Component({ 
    selector: 'page-destaques', 
    templateUrl: 'destaques.html' 
}) 
export class DestaquesPage { 
    ... 

    constructor(public navCtrl: NavController, db: AngularFireDatabase, private cart: CartService) { 
     ... 

     console.log(this.cart.getItems.length); 
    } 
    ... 
    } 

dans chaque page Je veux accéder à cet objet, mais dans chacun je reçois une marque nouvel objet qui signifie que je peux Je n'ai pas tous les différents éléments que j'ai déjà ajoutés.

Qu'est-ce qui me manque ici?

Answer 1

Vous devez vous assurer que la page n'est pas complètement chargée lors de la redirection. Comme si la page est chargée à nouveau, le service est détruit de la mémoire et les éléments sont initialisés à [] à nouveau.

Idéalement, vous devriez utiliser localStorage, avec votre service

import {Injectable} from '@angular/core'; 
import {Item} from '../models/item'; 

@Injectable() 
export class CartService { 

private items: Item[]; 

constructor() { 
    try { 
    this.items = JSON.parse(localStorage.get("mycart")) as Item[]; 
    } catch(err) { 
    this.items = []; 
    } 
} 

public addToCart(item: Item): string { 
    this.items.push(item); 
    localStorage.setItem("mycart", JSON.stringify(this.items)); 
} 

public getItems(): Item[] { 
    return this.items; 
} 
} 

J'espère que cela aiderait la cause