В последнее время я вижу большой энтузиазм в сообществах React и Vue по поводу Suspense API. Suspense предлагает компонент, который позволяет вам «ждать» отрисовки некоторого кода и декларативно указывать состояние загрузки (например, счетчик), которое отображается до тех пор. Вот пример из Vue:

Если вы не знакомы с задержкой, рекомендую прочитать эти статьи.

Увидев это, я сказал себе, что попробую сделать что-то подобное в Angular. В этой статье я хочу поделиться тем, что я создал, на что у меня ушло около 20 минут 😀

Подход, который я использовал, похож на тот, который использует Vue, поскольку он больше похож на Angular. Вот чего мы хотим достичь:

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

Если вы не знакомы с отложенной загрузкой компонентов с помощью Ivy, я рекомендую прочитать следующую статью:



Добро пожаловать в Лигу плюща: ленивая загрузка компонентов в Angular v9
Ленивая загрузка компонентов с помощью Ivy netbasal.com



Давайте начнем. Сначала создадим директиву defaultView:

Это простая директива, которая принимает на вход фабричную функцию, которая выбирает компонент. Перейдем к директиве fallbackView:

Единственная цель этой директивы - предоставить ссылку на шаблон, чтобы мы могли использовать ее в родительском компоненте приостановки. Директива errorView работает точно так же:

Теперь посмотрим на компонент suspense:

Получаем ссылку на каждую из ранее созданных директив. Мы также получаем ссылку на ViewContainerRef, чтобы мы могли добавить компонент в представление.

Следующие шаги заключаются в следующем: Создайте представление fallback, выберите компонент, создайте его и дождитесь, пока метод setup() завершит свою работу. Затем очистите представление и визуализируйте компонент. В случае ошибки вместо этого визуализируйте представление error.

И это все. Давайте посмотрим, как это работает:

Я также пошел дальше и добавил поддержку неленивых компонентов:

В приведенном выше примере он будет ждать, пока оба компонента закончат свои setup(), а затем отрендерить оба.

Вы можете увидеть полный код в репозитории this. Я знаю, что, вероятно, кое-что упустил, помните, что это была быстрая и грязная работа 🤓

🔥 Присоединяйтесь к нам

Вы суперзвезда Angular со страстью к ОС? Участвуйте в проектах ngneat и давайте создавать инструменты сегодня и завтра!

🚀 На случай, если вы это пропустили

Вот несколько моих проектов с открытым исходным кодом:

  • Акита: государственное управление, специально разработанное для JS-приложений
  • Spectator: мощный инструмент для упрощения ваших угловых тестов
  • Transloco: библиотека интернационализации Angular
  • error-tailer - Бесшовные формы ошибок для приложений Angular
  • Менеджер форм: основа правильного управления формами в Angular
  • Кешью: гибкая и простая библиотека, которая кэширует HTTP-запросы.
  • Error Tailor - бесшовные формы ошибок для приложений Angular.

И еще многие!

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Akita и JS!