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变量由应用组件访问。

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. 如何仅在用户登录时获取 totalQuantity 的值。

任何人都可以帮我解决这个问题吗？我被卡住了。

Answer 1

我没有看到你的app.module.ts，但为了确定，你需要在你的提供者中添加你的CartService。

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

不，因为您写了您的 totalQuantity 初始化为 0。

2. 如何仅当用户登录时才获取总数量的值。

在您的共享服务中，您可以使用一个函数，如果用户已登录，该函数将通过签入获取总数量。

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

Answer 2

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

有一个由某些服务方法填充的共享变量（totalQuantity）引入了时间耦合。仅当之前发生过其他操作时，该值才正确。我建议最好totalQuantity获取自己的值的方法。如果您担心性能成本并愿意牺牲一致性，则可以在方法中缓存值。

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