Маршрутизация вызовов в HTTP Угловых 2

Question

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

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

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

Я вижу два простых вариантов, чтобы сделать вызов Ajax:

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

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

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

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

Благодарим за помощь.

Answer 1

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

1. сП (Arent) перейти к кальцию
2. сА - показать форму, отправить данные в сПз
3. сП - отправить данные через AJAX, перейдите сВ
4. сВ - показать форму, отправить данные на cP
5. cP - (получена ошибка для данных A), отправьте данные B через ajax, перейдите на cC
6. cC - показать форму, сообщить об этом пользователю, если возникла ошибка с формой A, предложить пользователю вернуться или сейчас завершить этап C и сделать позже, отправить данные на cP

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

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

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