【问题标题】:Angular2 Global Data Model?Angular2 全局数据模型?
【发布时间】:2017-01-12 16:55:06
【问题描述】:

关于 Angular2 使用全局变量和全局状态有几个问题和讨论,但我的特殊需求比这稍微多一些,我正在努力寻找最好的方法来处理它(主要是由于在不同时间发布的相互冲突的信息) angular2 发布周期)。

因此,我实质上是在创建一个 SPA(单页应用程序)作为销售办公室的订单输入屏幕。

我的结构有点像这样:

 |_main_order_entry controller.ts
     |__order_line_controller.ts
        |_product_controller.ts
        |_colour_controller.ts
        |_size_cotroller.ts
        |_promotion_controller.ts
        |_comments_controller.ts

因此,当您加载 ma​​in_order_entry_controller.ts 时,它会预先填充一些基本数据、按顺序排列的下一个订单号以及订单日期/时间等简单的东西。

然后我们从 order_line_controller 开始,这里有点棘手,可以说

  1. product_controller,是一个下拉框,你选择一个产品 然后它用可用的颜色填充颜色控制器视图 对于所选产品
  2. 一旦你选择了一种颜色,它就会用 颜色和产品选择中可用的尺寸,如果您更改 这些选项中的任何一个,其他下拉框都会更新为 REST API 返回的新数据。

  3. 一旦您完成了一个 order_line_controller 实例,它会自动插入一个全新的 order_line_controller 实例,因为潜在的订单线的数量是无限的。 p>

现在,如果任何下拉框被更改,REST api 将被重新调用并更新有效选项。

为此,我需要一种干净的方式来存储所有数据,同时用户加载 ma​​in_order_entry_controller.ts

现在我的想法是最好的方法是创建两个模型

main_order_model.ts
order_line_model.ts

然后创建一个服务,每次加载ma​​in_order_entry_controller.ts,都会创建一个新的main_order_model.ts实例,然后为每个order_line_controller 已加载,它会创建 order_line_model.ts

的新实例

给我一​​个数据结构有点像这样的服务:

{
  "orderdate": "01/01/2017",
  "orderef": "JHASGAZXC",
  "orderlines": [
    {
      "linenumber": "1",
      "product": "T-SHIRT",
      "colour": "BROWN",
      "size": "Large",
      "promotion": "True",
      "comments": "Customer has requested gift wrapping"
    },
    {
      "linenumber": "2",
      "product": "JEANS",
      "colour": "BLUE",
      "size": "X-SMALL",
      "promotion": "False",
      "comments": "None"
    }
  ]
}

然后每次更改控制器值时,它都会更新全局服务中的数据模型,然后理论上每个控制器都可以从服务中提取它需要的任何数据。

我对 Angular2 相当陌生,所以我正在寻找正确的 Angular2 方法来做到这一点,这周我一直在官方 gitter 频道上询问,但运气不佳,非常感谢。

【问题讨论】:

    标签: angular rxjs angular2-services


    【解决方案1】:

    要管理全局状态,您可以使用 ngrx/store 和 ngrx/effects。这两个实现了 Redux 模式,这是管理应用程序状态的好方法,因此您可以使用单一数据源来存储数据并在应用程序的整个生命周期内共享数据。

    首先尝试学习redux模式。然后学习ngrx去https://github.com/ngrx/store。有什么需要问的可以去https://gitter.im/ngrx/store

    【讨论】:

    • 非常感谢,当我编写代码以反映我的问题以显示有效答案时,我会添加一个答案,这正是我想要的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-06
    • 1970-01-01
    • 1970-01-01
    • 2017-05-30
    • 1970-01-01
    • 2015-12-21
    相关资源
    最近更新 更多