角2 - サービスがデータを保持しない

Question

以下のコードでは、CartServiceクラスにはCartクラスがあります。 addToCart（）関数によってカートに格納されたCartItemがコンソールに表示され、この機能が動作することが示されます。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

export class CartItem { 

    constructor(private product: Product, private quantity: number) { } 

    public increaseQuantity() { 
    this.quantity++; 
    } 

    public getProduct(): Product { 
    return this.product; 
    } 
} 

export class Cart { 
    private cartItems: CartItem[] = []; 
    private numberOfItems = 0; 

    public addToCart(newProduct: Product) { 
    let existingItem: CartItem = this.findProduct(newProduct._id); 

if (existingItem) { 
    existingItem.increaseQuantity(); 
} else { 
    this.cartItems.push(new CartItem(newProduct, 1)); 
    this.numberOfItems++; 
} 
    console.log('Cart.cartItems = ', this.cartItems); 
    } 

    public getNumberOfItems(): number { 
    return this.cartItems.length; 
    } 

    private findProduct(id): CartItem { 
    for (let item of this.cartItems) { 
     if (item.getProduct()._id == id) { 
     return item; 
     } 
    } 
    return null; 
    } 

    public getCartItems() { 
    console.log('Cart.before return cartItems', this.cartItems) 
    return this.cartItems; 
    } 
} 

@Injectable() 
export class CartService { 
    private cart: Cart = new Cart(); 

    constructor() { } 

    public addToCart(product:Product) { 
    this.cart.addToCart(product); 
    } 

    public getNumberOfItems(): number { 
    return this.cart.getNumberOfItems(); 
    } 

    public getCartItems() { 
    return this.cart.getCartItems(); 
    } 
} 

カートクラスのCartItem（S）が取得されるときに問題が、以下に示すCartComponentクラスであり、それらは、カートに商品を示していません。どういうわけか、上記のコードでカートに保管されていたアイテムが消えてしまいます。

@Component({ 
    selector: 'app-cart', 
    templateUrl: './cart.component.html', 
    styleUrls: ['./cart.component.css'], 
    providers: [CartService] 
}) 
export class CartComponent implements OnInit { 
    cartItems:CartItem[]; 

    constructor(private cartService:CartService) { } 

    ngOnInit() { 
    this.cartItems = this.cartService.getCartItems(); 
    console.log('CartComponent.cartItems', JSON.stringify(this.cartItems)) 
    } 

} 

Answer 1

あなたがCartComponentにサービスを提供していると思われます。コンポーネントが破棄されて再作成されると、新しいサービスインスタンスが作成されます。

代わりにアンギュラアプリケーションと同じ寿命でアプリ全体のシングルトンを取得するためにAppModule

@NgModule({ 
    providers: [CartService, ...] 
}) 
export class AppModule {} 

にそれを提供。