Question

假设我正在构建一个购物应用程序，其中的一个功能是让用户能够浏览一类商品。在浏览项目时，用户可以将项目存储到他们自己的列表中（如亚马逊的愿望清单功能）。因此，我有一个名为item的组件，它向用户显示一个项目。

项目组件允许用户单击其中的+图标，该图标将显示用户的列表。然后，用户可以选择要添加项目的列表。有点像YouTube在这里所做的：https://i.imgur.com/pAKVBBv.png。

我还计划有一个列表页面，用户可以在其中浏览他们制作的特定列表的项目。列表页面将包含许多item个组件。

问题在于，虽然页面上显示了许多item个组件，但他们都需要知道用户创建的列表，并且他们的列表是从网络中检索的服务器（来自数据库）。

那我该怎么办呢？我可以让他们所有人都发出HTTP请求，但这会对页面上的每个项目执行HTTP请求，只是为了获得相同的数据。我可以将此职责传递给父组件，但有时item组件本身没有父组件来获取列表。

Answer 1

您可以拥有如下所示的组件结构，并使用角度存储来管理可以在组件之间共享的数据状态。

父项目列表组件：将有一个http调用来获取项目列表并保存到商店。
子项目组件：可以通过点击添加事件从商店中检索列表，如果存储为空，则调用http以检索列表并将其保存到存储中以用于任何后续调用。
- 有关商店的更多详情，请访问： https://github.com/ngrx/platform
- ngrx团队的图书收藏应用程序示例可在此处找到： https://stackblitz.com/github/ngrx/platform/?file=example-app%2Fapp%2Fcore%2Freducers%2Flayout.ts

Answer 2

我也是一个大型购物车，这就是我实现我的应用程序的方式。我在mongodB中有这样的用户模型：

name
item[]
order[]
savedForLater[]
....

允许用户在不使用MongoStore / session登录的情况下将项目添加到购物车。用户还可以保存项目以供稍后会话使用。我本可以使用localStorage，但这是我在AngularJs中学到的。当用户登录时，项目和saveForLater将保存在用户的项目中，并以dB为单位保存为ForLater。下面是我对SavedItemForLater的部分代码：

savedForLaterUserLoggedIn(itemObj: Item){
  this._itemLaterService.addItemLater(itemObj).subscribe(
    itemLater =>{
      this._itemLaterService.getItemsLaterUser().subscribe(
        items => {
              if(items.length == 0) {
                this._itemLaterService.isLaterSession = false;
                this.isLaterSession = false;
                return;
              }                 
              this.laterSessionItems = items;
              this._itemLaterService.isLaterSession = true;
              this.isLaterSession = true;        
              let itemId = itemObj.itemId; 
              this.deleteItem(itemId); // delete item from user         
          this.leftButton = 'none';
          this.getSaveLaterResponsive();                    
        },
        error=>{ console.log('get items later user logged in 
               error!'); 
      });
  },
  error=> { console.log('add item later user logged n error!'); }
  ); 
}

附带的图片应该会给你一个更好的解释。注意。右边的项目有QTY：2。如果您需要更多信息，请告诉我。

我如何在Angular中构建它：多个组件从HTTP

2 个答案: