Angular2全球数据模型?

时间:2017-01-12 16:55:07

标签: angular rxjs angular2-services

关于使用全局变量和全局状态的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

因此,当您加载 main_order_entry_controller.ts 时,它会预先填充一些基本数据,按顺序排列下一个订单号,以及订购日期/时间,这很简单。

然后我们从 order_line_controller 开始,事情变得有点棘手,让我们说

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

  3. 完成一个 order_line_controller 实例后,它会自动插入 order_line_controller 的全新实例,因为潜在订单行的数量是无限的。

  4. 现在,如果更改了任何下拉框,则会立即重新调用REST api并更新有效选项。

    为了实现这一点,我需要一种干净的方式来存储所有数据,同时用户加载 main_order_entry_controller.ts

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

    main_order_model.ts
    order_line_model.ts
    

    然后创建一个服务,每次加载 main_order_entry_controller.ts 时,它会创建一个新的 main_order_model.ts 实例,然后为每个 order_line_controller < / strong>已加载,它会创建 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频道并且没有太多运气,非常感谢。< / p>

1 个答案:

答案 0 :(得分:1)

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

首先尝试学习redux模式。然后学习ngrx转到https://github.com/ngrx/store。如果您需要提问,可以前往https://gitter.im/ngrx/store