Корректный способ предварительной выборки данных для компонентов / страниц Angular

Корректный способ предварительной выборки данных для компонентов / страниц Angular

От автора: вы когда-нибудь задавались вопросом, почему вы загружаете в Angular компоненты, а после этого вызывается API?

То, с чем вы могли встречаться — мы выводим загрузчик после отображения компонента, а также смотрим, скрыть ли или показать загрузчик страниц, или наш пользователь / клиент задает такой вопрос:

Почему мы отображаем загрузчик после загрузки страницы, не можем ли он показывать мои данные один раз. Посмотрите на этот сайт на WordPress, он загружает данные один раз.

Корректный способ предварительной выборки данных для компонентов / страниц Angular

Resolver в действии

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Корректный способ предварительной выборки данных для компонентов / страниц Angular

Без Resolver, стандартный процесс

Обработка ошибок: Компонент загружен, вызывается загрузка данных из API, чтобы получить нужные данные для нашей страницы или компонента. Зачем переходить на страницу, когда данные, необходимые для использования страницы для пользователей, не загружаются?

Загрузчик: Вам нужно управлять переменной загрузчика, чтобы переключать представление при загрузке данных, если данные разбросаны по странице, вы используете все данные для переключения видимости каждого блока. Как насчет наличия загрузчика маршрутизатора SINGLE Navigation Event, и вы можете не беспокоиться о том, чтобы следить за тем, чтобы переменная отображала видимость?

Желательно предварительно получать данные с сервера, чтобы он был готов в тот момент, когда маршрут активирован. Это также позволяет обрабатывать ошибки до перехода к компоненту: https://angular.io/guide/router#resolve-guard

Если вы встречались с приведенными выше проблемами, вы можете продолжить чтение. То, что мы собираемся сделать — создать приведенное выше приложение, используя резольвер.

Создайте приложение Angular с помощью Angular cli

Создайте маршруты

Создайте файл src/app/app.routes.ts и добавьте в него приведенный ниже код.

Здесь добавлен параметр маршрута with-error, информирующий, дает ли приложение сбой через значение true | false. Давайте создадим наши страницы / компоненты:

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Откройте созданный выше файл службы, нам нужно реализовать интерфейс резольвера Angular.

Мы создали включаемую службу, резольвер — это просто реализация Resolve<T>, где T — ожидаемое возвращаемое значение, которое указано как интерфейс IReturn. Наш MockHttpService похож на провайдер api, в котором выполняются основные вызовы api к серверу и асинхронный возврат данных с сервера.

Наблюдение осуществляется из вышеупомянутого файла резольвера, для управлением состоянием загрузки приложения больше ничего не требуется. Как это связано с началом загрузки? Скоро мы рассмотрим это. Обработка ошибок до сих пор была очень простой, поскольку мы просто выполняли передачу ошибки с использованием встроенной службы NgAlert и выдавали ошибку маршрутизатору.

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

Наш шаблон компонента может использовать data|dynamicTitle, как если бы данные были связаны с компонентом. Теперь давайте применим наш resolver к маршруту records.component.ts, добавив этот дополнительный ключ к объекту маршрута в app.routes.ts

Используя ключ resolv, мы можем добавить несколько резольверов для пары «ключ-значение», где ключ находится там, где будет храниться обработанное соответствующим резольвером значение, а затем мы можем извлечь его так:

Вернемся к вопросу, как это будет связано с началом загрузки? Все, что нам нужно — это подключиться к событию перехода Angular и работать с загрузчиком страницы. Чтобы получить дополнительную информацию о том, как это сделать, ознакомьтесь с приведенной ниже статьей: Загрузчик страницы Youtube с Angular 2+ события маршрутизатора.

Демо-версия, проиллюстрированная приведенными выше gif-изображениях доступна по ссылке: https://theo4u.github.io/Angular-resolvers/

Зависимости для данного приложения:

Bootstrap

ng2-slim-loading-bar

ngAlert

Автор: Theophilus Omoregbee

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree