javascript - Angular 2 使用 SharedService 将项目推送到数组以更新 UI

Question

当您将商品添加到购物篮时，我正在尝试更新购物车计数，我想到的唯一方法是使用 localStorage 保存商品，但是我想尽快更新 UI用户添加一个项目。

所以我想我可以创建一个 SharedService 并将项目推送到那里，但是如何从该服务中检索项目的 array 以在用户时更新 UI添加项目？

到目前为止的共享服务 --

export class SharedServiceService {
public itemArr: any = [];
  constructor() { }

  itemCollection(item) {
    this.itemArr.push(item);
    console.log(this.itemArr);
  }
}

我的AddToBasket组件函数--

addToBasket(itemCode) {
  this.sharedServiceService.itemCollection(itemCode);
}

我想从我的 app.component 中检索项目的 array，以为它会像这样简单，但 ofc 它不是这样 this .basketCount 返回[] 空数组。我想显示的是 array 长度 (10) Items。

ngOnInit() {
 // console.log(this.sharedServiceService.itemArr);
    this.basketCount = this.sharedServiceService.itemArr;
  }

Plnkr example

Answer 1

是的，就像获取数组一样简单。它可能不适用于您的情况，因为您是在 ngOnInit() 中执行此操作，该函数仅在数组仍为空时运行一次。但是，如果您将其放在其他位置，例如在应用程序组件模板中，您将看到它如何更新:

<div>
  <h2>Basket Count ({{sharedService.itemArr.length}}) show count</h2>
  <app-basket></app-basket>
  {{ sharedService.itemArr | json }}
</div>

为了使其更具可读性，您还可以使用计算属性:

private get basketCount():number { 
  return this.sharedService.itemArr.length; 
}

private get basket {
  return this.sharedService.itemArr;
}

然后您只需插入计算属性即可:

<div>
  <h2>Basket Count ({{ basketCount }}), or ({{ basket.length }}) show count</h2>
  <app-basket></app-basket>
  {{ basket | json }}
</div>