Как сохранить состояние в angular 2?
Я просто получаю голову вокруг углового 2 и смотрю на проектирование типа приложения мастера. Компоненты на странице 1 должны передавать данные компонентам на других страницах. Думая об использовании службы для сохранения состояния / данных, которые вводятся в следующем представлении / компоненте мастера. Все это должно быть свободно связано. Я не думаю, что полезно создавать наблюдаемый шаблон, потому что компонент, который находится на одной из следующих страниц/представлений, еще не виден. Какие новые функции в angular 2 может быть использован для решения этой проблемы?
2 ответов
Регистрация @ngrx / store
RxJS powered государственного управления вдохновлен Redux для Angular2 приложений
Я предлагаю сохранить ваше состояние централизованным, используя, например,Redux. Затем вы должны использовать @Input() и @Output () angular для распространения вашего состояния на компоненты и отправки изменений состояния из ваших компонентов.
У вас будет компонент верхнего уровня, который подписывается на изменения состояния и распространяет их с помощью дочернего компонента @Inputs. Ваши дочерние компоненты будут выдавать запросы на изменение состояния с помощью @Outputs() компоненту верхнего уровня, который в свою очередь обновляет центральное государство.
таким образом, ваш отдельный компонент не должен ничего знать о том, как состояние хранится и обновляется, они просто предоставляют функциональность и принимают входные параметры, которые могут оказать желаемое влияние на их функциональность.
Если у вас много глубоко вложенных компонентов, они сами также используют @Input() и @Output() для обеспечения функциональности и не связываются напрямую с каким-либо хранилищем состояний.
Я сам через это метод и он держит каждый компонент очень постным и многоразовым, делая его супер легким отслеживать ваше состояние, и уменьшает сложность синхронизации вашего состояния между компонентами много.
вы должны дополнительно посмотреть ChangeDetectionStrategy и ChangeDetectorRef, так как вы можете упростить обнаружение изменений компонентов с помощью этого метода. Все ваши дочерние компоненты обычно могут использовать так называемую стратегию проверки OnPush, что означает их обнаружение изменений будет выполняться только при изменении свойств @Input (). Поскольку это единственный способ изменить состояние в этом случае, вы можете сказать angular не проверять изменения в противном случае. Это также поможет с производительностью.
обратите внимание, что вы можете сохранить состояние, используя только обычную службу angular2, но что-то вроде Redux дает вам некоторые вещи бесплатно, например, инструменты dev. Если вы идете с Redux, также посмотрите на Immutable.js как это важно не мутировать состояние напрямую с помощью Redux.