Angular 2 - 在组件之间使用共享服务传递数据

Question

我的目标是获取我的购物车项目的总数量，并将其显示在我的主要组件内的导航栏上的我的购物车链接上。

这里是我的购物车服务

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class CartService { 
    totalQuantity: Number = 0; 

    constructor(private _http: Http) { }; 

    getCartItems(userId) { 
     let headers = new Headers({ 'Authorization': 'JWT ' + localStorage.getItem('currentUserToken') }); 
     let options = new RequestOptions({ headers: headers }); 
     return this._http.get('http://localhost:3000/cart/getitem/' + userId, options) 
      .map((response: Response) => { 
       this.totalQuantity = response.json().totalQuantity; 
       return response.json(); 
      }) 
      .catch(this._handlerError) 
    } 

    updateCartItem(item){ 
     console.log(item); 
     let headers = new Headers({ 'Authorization': 'JWT ' + localStorage.getItem('currentUserToken') }); 
     let options = new RequestOptions({ headers: headers }); 
     return this._http.post('http://localhost:3000/cart/updateitem/', item, options) 
      .map((response: Response) => { 
       this.totalQuantity = response.json().totalQuantity; 
       return response.json(); 
      }) 
      .catch(this._handlerError) 
    } 

    removeCartItem(item){ 
     let headers = new Headers({ 'Authorization': 'JWT ' + localStorage.getItem('currentUserToken') }); 
     let options = new RequestOptions({ headers: headers }); 
     return this._http.post('http://localhost:3000/cart/deleteitem/', item, options) 
      .map((response: Response) => { 
       this.totalQuantity = response.json().totalQuantity; 
       return response.json(); 
      }) 
      .catch(this._handlerError) 
    } 

    _handlerError(err: any) { 
     console.log(err); 
     // throw err; 
     return Observable.throw(err); 
    } 
} 

我做了名为totalQuantity公共变量和执行的购物车服务的功能之一后充满价值。此totalQuantity变量由app组件访问。

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { loginStatusChanged } from './auth.guard'; 
import { CartService } from './cart'; 
import { UserService } from './user'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit{ 
    title = 'app works!'; 

    loginStatus: boolean; 

    constructor(private _cartService: CartService, private _userService: UserService, private _router: Router){} 

    totalQuantity = this._cartService.totalQuantity; 

    onLogout(){ 
    this._userService.logout(); 
    loginStatusChanged.next(false); 
    this._router.navigate(['/login']); 
    } 

    ngOnInit(){ 
    this.onLogout(); 
    loginStatusChanged.subscribe(status => this.loginStatus = status); 
    } 
} 

我觉得这里的问题是：1。 如果用户不执行从cartService一个函数，则totalQuantity变量将永远不会有一个值。 2.我怎样才能得到ONLY IF用户登录的的totalQuantity值。

谁能帮我解决这个问题吗？我卡住了。

Answer 1

我没有看到你的app.module.ts，但可以肯定的是，你需要在你的提供者中添加你的CartService。

1. 如果用户不执行从cartService一个函数，则totalQuantity变量将永远不会有一个值。

不，因为你写你的totalQuantity被初始化为0。

如何才能得到只有当用户登录的totalQuantity的价值。

在你sharedService，你可以到一个功能将由用户是否登录签得到totalQuantity。

getTotalQuantity() { 
    let isLoggedIn: boolean = methodThatCheckIfLoggedIn(); 
    if (isLoggedIn) 
     return this.totalQuantity; 
    return null; 
} 

Answer 2

标题'在组件之间使用共享服务传递数据'表示设计问题。如果您希望在组件之间传递数据，则应该通过在组件之间传递数据来实现（@Input & @Output）。

拥有由某些服务方法填充的共享变量（totalQuantity）引入了时间耦合。只有在之前发生了其他动作时，该值才是正确的。我建议制作totalQuantity这个方法可能会取得自己的价值。如果您担心性能成本，并且愿意牺牲一致性，那么您可以在方法中缓存该值。

最后，如果您不想执行任何操作，则只需调用其中一个方法，即从AppComponent构造函数中更新totalQuantity，然后更新totalQuantity。