Несколько месяцев назад я написал статью о HTTP-перехватчике в новом Angular. Это полезно для таких вещей, как глобальные заголовки HTTP или вызов некоторых промежуточных программ.
Это реальный пример того, как показывать предварительный загрузчик с каждым HTTP-запросом через HTTP-перехватчик. С моей точки зрения, глобальное решение этой проблемы не является антипаттерном. Мы по-прежнему можем использовать множество различных прелоадеров, а не только один.
В этой статье я использую HTTP-перехватчик из моей предыдущей статьи, для полного понимания, пожалуйста, прочтите сначала эту статью.
Хорошо, теперь мы готовы, поехали !!
Сначала мы определяем компонент большого прелоадера.
И для небольшого прелоадера.
Теперь мы можем создать наш PreloaderService, в котором мы определяем статические переменные типа Number для большого и малого прелоадера. Мы будем изменять их с помощью общедоступных методов PreloaderService # showPreloader (type) и PreloaderService # hidePreloader (type). Мы можем вызывать их с типом параметра, который является именем предварительного загрузчика, который мы можем показать или скрыть. В реальном приложении мы можем вызывать множество запросов одновременно, но мы можем показать предварительный загрузчик с началом первого запроса и скрыть его, когда последний запрос будет выполнен. Эту ситуацию мы можем решить с помощью нашей статической переменной, которую мы определили. Значение переменной мы увеличиваем / уменьшаем с каждым запросом. При значении 0 прелоадер скрыт.
Наш PreloaderService нам нужно добавить в конструктор в нашей службе HttpInterceptor.
Теперь мы готовы завершить наш пример. Мы можем добавить наши прелоадеры в нужное место в нашем приложении.
Вы можете прочитать и попробовать весь код в моем репозитории GitHub.
Спасибо за чтение! 🐹🐯
