【问题标题】:Communication between two Angular (ver 5, 8) apps (handshake)两个 Angular(版本 5、8)应用程序之间的通信(握手)
【发布时间】:2019-12-13 20:37:27
【问题描述】:

在 2 个 Angular 应用程序之间进行通信的推荐方法是什么?

例如,App 1 是产品页面,App 2 是购物车。

一个要求是订单不被持久化。这意味着我们不能从 app1 调用服务来创建订单并在 app2 中检索它。订单需要在app2中创建。

一种方法是使用从 app1 到 app2 的 POST,但想研究其他选项。 我知道 localStorage 就是其中之一,但还有其他更好的选择吗?或者基本上就是这样?

【问题讨论】:

  • 它们不应该是不同的应用程序,而是加载在同一个应用程序中的模块。理想情况下,它们是有一个宿主应用程序(选择一个或一个新的)加载另一个的模块。
  • 不幸的是,它们需要是不同的应用程序,因为 1 个团队负责购物车,而我们还有其他团队将与购物车交互(各种其他销售应用程序)
  • 具有预定义接口的模块可以很容易地由多个团队同时开发。角度库也由多个人/团队创建和维护,并且库中的所有这些项目都不是在它自己的应用程序中找到的吗?那么为什么要遵循这种范式呢?
  • 我想有多个应用程序遵循微前端方法,因此没有将它们放在一个应用程序中,这个问题实际上是有效的。

标签: angular angular5 angular8


【解决方案1】:

您可以设置两个 Angular 应用程序共享的 RESTful 后端。根据需要保存和检索数据。两个应用程序完美协调。

编辑:

我将进一步解释。

SalesApp = Angular v5 销售应用程序

CartApp = Angular v8 购物车应用

BackendAPI = 一个安静的后端 API

假设用户正在 SalesApp 上浏览产品。用户喜欢该产品并点击Add to Cart。 SalesApp POST 到 BackendAPI。

POST cart/{productId}

现在用户可以结帐了。在 SalesApp 上,用户单击购物车导航。这会加载 CartApp。在 CartApp 加载后,我们会查询购物车商品。

GET cart

这将获得购物车中的物品。

【讨论】:

  • 在假设我们有 app1(销售页面)添加要传递到 app2(购物车页面)的产品的情况下,这将如何工作,其中购物车 2 使用已传递的产品创建订单来自应用程序 1。后端如何知道从应用程序 1 传递了什么产品?除非我们将某种令牌保存到 localStorage 并在浏览器加载 app2..hmm.. 后使用该令牌检索产品信息
  • 我记得另一个要求,即服务没有持久化。这意味着在我们实际加载 app2 之前我们无法创建订单 :(
猜你喜欢
  • 1970-01-01
  • 2016-07-27
  • 2011-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-28
  • 2011-08-06
  • 1970-01-01
相关资源
最近更新 更多