Angular2 Глобальная модель данных?

Question

Существует несколько вопросов и дискуссий об Angular2, использующих глобальные переменные и глобальные состояния, но мои особые потребности немного больше, чем это, и я изо всех сил стараюсь подходить к нему (в основном из-за противоречивой информации, опубликованной в разное время во время углового2 цикл выпуска).

Так вот, я по сути создаю 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, вы это pre_populates некоторых основных данных, следующий порядковый номер в последовательности, и дата заказа/время, легкий материал.

Тогда мы начинаем с order_line_controller, где все становится немного сложнее, позволяет сказать

1. product_controller, является выпадающий список, вы выбираете продукт Затем заполнит вид цветной контроллер с доступные цвета для выбранного продукта

2. Как только вы выберете цвет, он заполняет контроллер размера с размерами , доступными в цвете и выборе продукта, если вы ch ange любой из этих опций, другие выпадающие окна обновляются с новыми данными, возвращаемыми API REST, .

3. После того, как вы завершили один order_line_controller экземпляра, он автоматически вставляет целый новый экземпляр order_line_controller, поскольку число потенциального OrderLines безгранично.

Теперь в любое время, если какой-либо из выпадающих списков будет изменен, 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, который загружается, он создает новый экземпляр 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" 
    } 
    ] 
} 

Тогда каждый раз, когда значение контроллера изменяется , он обновляет модель данных в глобальной службе, а затем каждый контроллер теоретически может вытащить любые данные, необходимые ей из службы.

Im довольно новый для Angular2, так что я ищу правильный Angular2 способ сделать это, я просил об этом на официальном канале gitter на этой неделе и не очень повезло, спасибо очень.

Answer 1

Для управления глобальным состоянием вы можете использовать ngrx/store вместе с ngrx/effects. Эти два реализуют шаблон Redux, это отличный способ управлять состоянием приложения, поэтому у вас может быть один источник правды, чтобы хранить ваши данные и делиться ими на протяжении всего жизненного цикла вашего приложения.

Сначала попробуйте изучить шаблон редукции. Затем, чтобы узнать ngrx, перейдите к https://github.com/ngrx/store. Если вам нужно что-то задавать, то можете пойти в https://gitter.im/ngrx/store