Угловой v4: храним ли мы данные в Сервисе или Компоненте или в обоих?

Просмотрев довольно много учебников, а также прочитав документацию Angular, я до сих пор не понимаю эту тему.

https://angular.io/tutorial/toh-pt2 Угловое руководство четко показывает данные, хранящиеся в компоненте.

https://angular.io/guide/architecture#services Угловая архитектура> Раздел служб показывает код с услугой, имеющей массив данных (это правильно?).

Если мы будем хранить данные в Компонентах, мы бы сильно использовали @Input и @Output для перемещения данных между дочерними компонентами (если мы хотим, чтобы эти данные были в интерфейсе), однако это создает проблему, когда мы используем маршрутизацию, нам нужен наш новый компонент который загружается с маршрутизатора-выхода, чтобы сделать новый звонок нашему сервису за обещание сделать вызов API нашему серверу для хранения данных. Возможно, в этом случае у нас будет 2 компонента, содержащие одни и те же данные - однако они могут не совпадать.

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

Каков надлежащий способ хранения данных? Разве один из других не рекомендуется?

Ответ 1

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

Если вам не нужно отправлять конкретные данные между различными компонентами, то хранение данных в компоненте вполне приемлемо! Имейте в виду, что он не будет доступен из других компонентов, если вы не используете ввод/вывод.

Ответ 2

Компонентные контроллеры должны управлять только взаимодействием пользовательского интерфейса для этого конкретного компонента.

С другой стороны, службы управляют взаимодействием между компонентами, сопоставлением данных, обработкой событий между компонентами, которые не имеют прямой зависимости (parent> child, siblings и т.д.).

Идея заключается в том, что служба однажды создается, она остается в сфере действия и не разрушается. Компоненты с другой стороны удаляются из DOM после их уничтожения. С учетом сказанного, если вы используете свой компонент для выполнения, например, вызовов API для сбора данных, этот вызов API будет выполняться каждый раз, когда компонент инициализируется в жизненном цикле структуры, тогда как службы, как уже упоминалось, будут сохраняться.

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

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ

Имейте в виду, что учебник Angular.io разделен на несколько разделов, чтобы дать полное представление о структуре, поскольку пользователь следует учебнику.

Ответ 3

Если несколько Компонентов обмениваются данными, поместите их в службу... когда это возможно. Я говорю, когда это возможно, потому что, заставляя службу управлять данными, теперь вам нужно беспокоиться о устаревших данных. Мое место хранения данных goto находится в компоненте, но вы должны быть осторожны, так как вы не хотите, чтобы сайт постоянно перечитывал данные.

Лично большинство моих компонентов управляют своими собственными данными, чтобы избежать проблем с устаревшими данными.

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

Я не авторитет эксперта по этому, хотя, это только мое мнение.

Ответ 4

Вы знаете, что @Output имеет отношение к правилу EventEmitter, поэтому данные распределяются между компонентами путем привязки к событиям. Сервисы - это то, где вы обычно делаете что-то вроде запроса Http - что-то вроде RESTFUL api. Это может быть также локальное хранилище, сетевое подключение или как ведро для хранения состояния, пока приложение работает. Компоненты в общем случае связаны с представлениями и используют теневую DOM