假设我正在构建一个购物应用，它的功能之一是让用户能够浏览某一类别的商品。在浏览商品时，用户可以将商品存储到自己的列表中（如亚马逊的愿望清单功能）。因此，我有一个名为 item 的组件，它向用户显示一个项目。
item 组件允许用户单击其中的+ 图标，该图标将显示用户的列表。然后用户可以选择一个列表来添加项目。有点像 YouTube 在这里所做的：https://i.imgur.com/pAKVBBv.png。
我还计划创建一个列表页面，用户可以在其中浏览他们制作的特定列表中的项目。列表页面会有很多 item 组件。
问题在于，虽然页面上显示了许多item 组件，它们都需要知道用户创建的列表，并且它们的列表是从网络服务器检索的（来自数据库）。
那么我该怎么做呢？我可以让他们都发出一个 HTTP 请求，但这会为页面上的每个项目执行一个 HTTP 请求，只是为了获取相同的数据。我可以将此责任传递给父组件，但有时item 组件本身会没有父组件来获取列表。
【问题讨论】：
您可以拥有像下面这样的组件结构，并使用角度存储来管理可以跨组件共享的数据状态。
子项组件：可以通过单击添加事件从商店中检索列表，如果商店为空，则调用 http 来检索列表并将其保存到商店以供任何后续调用。
【讨论】：
我也在构建一个大型购物车，这就是我实现我的应用程序的方式。我在 mongodB 中有一个这样的用户模型：
name
item[]
order[]
savedForLater[]
....
允许用户在不使用 MongoStore/session 登录的情况下将商品添加到购物车。用户还可以保存项目以供会话稍后使用。我本可以使用 localStorage，但这是我在 AngularJs 中学到的。当用户登录时，items 和 saveForLater 保存在用户的 items 中，并以 dB 为单位 saveForLater。以下是 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!'); }
);
}
【讨论】：