Маршрутизация с помощью http-вызовов в Angular 2

Я ищу лучший способ маршрутизации между моими компонентами в Angular 2. В моем приложении я перехожу со страницы на страницу, отправляя форму:

  • На странице А отображается форма и кнопка отправки для перехода к следующему шагу.
  • Данные, введенные пользователем в форме страницы A, используются для вызова серверного действия с использованием ajax,
  • Страница B показывает результат вызова ajax и новую форму для перехода к следующему шагу (страница C)...

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

Я вижу два простых варианта вызова ajax:

  1. Компонент A только отображает форму и перенаправляет входные параметры компоненту B. Компонент B запускает вызов ajax и отображает результат.
  2. ИЛИ компонент A запускает вызов ajax с входными параметрами, которые у него есть, и передает результат компоненту B для отображения. В случае ошибки компонент А снова отобразится.

Проблема с вариантом 1 заключается в том, что в случае ошибки бэкэнд ответит страницей бизнес-модели и сообщением об ошибке. Компонент B должен будет переслать результат компоненту A, чтобы страница A могла быть повторно отображена.

Проблема с вариантом 2 заключается в том, что компонент A имеет часть бизнес-логики компонента B, что не совсем подходит для инкапсуляции компонентов.

Мой вопрос: есть ли хороший шаблон проектирования для этого? Должен ли я использовать промежуточный компонент, например?

Спасибо за помощь.


angular angularjs angular2-routing angular2-http
person j3r6me    schedule 26.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я бы переместил все вызовы ajax в родительский компонент и сохранил бы все данные там, предполагая, что формы независимы. Итак, рабочий процесс будет таким:

  1. cP(arent) перейти к cA

  2. cA - показать форму, отправить данные в cP

  3. cP - отправить данные A через ajax, перейти к cB

  4. cB - показать форму, отправить данные в cP

  5. cP - (получил ошибку для данных A), отправить данные B через ajax, перейти к cC

  6. cC - показать форму, уведомить пользователя об ошибке с формой A, предложить пользователю вернуться сейчас или завершить шаг C и выполнить A позже, отправить данные в cP

  7. cP - (получила фатальную ошибку для данных B), не отправлять данные C через ajax, сохранять данные в localStorage?, скажите пользователю попробовать позже...

    ...так далее. Это более удобно для пользователя, и вы можете отображать страницы/формы по мере необходимости.

Если формы зависят друг от друга, я бы все равно сохранил ajax и данные в родителях и отобразил их, если/когда сервер ответит. Но я рекомендую сделать их независимыми или включить музыку в лифте во время пользователь ждет (;

person Sasxa    schedule 26.01.2016
comment
Спасибо, это то, что мы тоже себе представляли. Меня беспокоит, что каждый компонент не отвечает за вызов своей собственной службы, но я думаю, что другого выбора нет. Я предполагаю, что мы можем рассматривать родительский элемент как оркестратор, который также будет интерфейсом с серверной частью. Компоненты страницы просто забирают представление. - person j3r6me; 27.01.2016
comment
Что касается музыки для лифта, я думаю, мы остановимся на странице ожидания с модальным стилем ;) - person j3r6me; 27.01.2016