如何在Angular中构建此结构:多个组件从HTTP请求相同的数据 [英] How do I structure this in Angular: Multiple components requesting same data from HTTP

问题描述

比方说，我正在构建一个购物应用程序，它的功能之一就是使用户能够浏览商品类别.在浏览商品时，用户可以将商品存储到自己的列表中(例如Amazon的愿望清单功能).因此，我有一个名为item的组件，该组件向用户显示一个项目.

Let's say I'm building a shopping app and one of the features it has is to give users the ability to browse a category of items. While browsing the items, the user can store the items into their own lists (like Amazon's wish list feature). Therefore, I have a component called item which shows an item to the user.

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

The item component allows the user to click a + icon in it which will show the user's their lists. Then the user can select a list to add the item to. Kind of like what YouTube did here: https://i.imgur.com/pAKVBBv.png.

我还计划有一个列表页面，用户可以在其中浏览他们创建的特定列表的项目.列表页面上会有很多item组件.

I also plan to have a list page, where a user can browse the items of a specific list they made. The list page would have a lot of item components.

问题是，尽管页面上显示了许多item组件，但它们都需要知道用户创建的列表，并且它们的列表是从Web服务器中检索的(来自数据库).

The problem is that while there are many item components displayed on the page, they all need to know the lists that the user has created, and their lists are retrieved from a web server (from a database).

那我该怎么做?我可以让所有这些人都发出HTTP请求，但这将对页面上的每个项目执行HTTP请求，而只是获得相同的数据.我可以将这一责任传递给父组件，但是有时item组件本身就是没有父组件才能从中获取列表的.

So how would I do this? I could have all of them make an HTTP request, but that would execute an HTTP request for each item on the page, only to get the same data. I could pass this responsibility to a parent component, but sometimes the item components would be by itself with no parent to get the lists from.

推荐答案

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

I am also a building a large scale shopping cart and this is how I implemented my application. I have a user model like so in mongodB:

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

允许用户在不使用MongoStore/session进行登录的情况下将商品添加到购物车.用户还可以保存项目以供以后的会话使用.我本可以使用localStorage，但这是我在AngularJs中学到的.当用户登录后，项目和saveForLater将以dB的形式保存在用户的项目中，并且saveForLater.下面是我的SavedItemForLater的部分代码:

The user is allowed to add items to the cart without signing on using MongoStore/session. The user can also save items for later in session. I could have used localStorage but this is what I learned in AngularJs. When the user is signed on, the items and saveForLater are saved in user's items and savedForLater in dB. Below is my partial code to for 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!'); }
  ); 
}  

附件中的图像应为您提供更好的解释.笔记.右边的项目的数量:2.请告诉我是否需要更多信息.

The attached images should give you a better explanation. Note. The item on the right has QTY: 2. Let me know if you need more information.

这篇关于如何在Angular中构建此结构:多个组件从HTTP请求相同的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！