Question

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

这是我的购物车服务

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); } }变量由app组件访问。

totalQuantity

我认为这里的问题是： 1.如果用户没有从cartService执行函数，则totalQuantity变量将永远不会有值。 2.如何在用户登录时获取Access-Control-Allow-Origin: * 的值

。

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

Answer 1

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

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

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

如果用户登录，我怎样才能获得totalQuantity的值。

在您的sharedService中，如果用户已登录，您可以通过签入来获取totalQuantity的函数。

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

Answer 2

标题“使用组件之间的共享服务传递数据”表明存在设计问题。如果您希望在组件之间传递数据，则应该通过在组件之间传递数据（@Input＆amp; @Output）来实现。

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

最后，如果您不想这样做，那么只需从totalQuantity构造函数中调用其中一个更新AppComponent的方法，然后更新totalQuantity。

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

2 个答案: