Показывать страницы до того, как их данные будут загружены в Angular2

Question

Если шаблон Angular2 зависит от данных для отображения, и эти данные еще не загружены, это приведет к разрыву всего приложения, что потребует перезагрузки его страницы.

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

Что произойдет, если вы хотите, чтобы страница отображалась, например, за спиннером, и просто данные появляются после ее доступности? Есть ли способ сделать это в Angular2, который по-прежнему использует преобразователи, или это единственный способ реализовать собственные вызовы службы в компоненте, с логикой в ​​шаблоне, чтобы предотвратить использование данных, если оно недоступно? Например, каждый {{ foo.bar }} в ваших шаблонах должен быть изменен на {{ foo && foo.bar }}.

Есть ли подход, основанный на использовании Angular2?

Answer 1

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

{{foo && foo.bar}} 

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

{{foo?.bar?.another?.property}} 

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

Другим решением является, чтобы обернуть все в ngIf как этот

<div *ngIf="loading">Page is loading</div> 
<div *ngIf="!loading"> {{foo.bar}} </div> 

С другой стороны, если у вас есть несколько компонентов, вы можете иметь много счетчик иконки, загрузка ... Сообщения спреда по всей вашей странице. Или просто разместите свой ngIf в компоненте верхнего уровня вашей конкретной области содержимого. Я бы сказал, это зависит от вашего варианта использования и ваших личных предпочтений UX.

Answer 2

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

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

По крайней мере, у вас все еще есть корневой компонент, ака AppComponent, который обертывает <router-outlet></router-outlet>.

Вы можете поместить разметку счетчика внутри шаблона AppComponent и использовать сервис, чтобы начать/остановить его.

Затем введите эту службу в свой Резолюс, чтобы согласовать счетчик и операцию асинхронного режима.Более конкретно, внутри метода resolve() вы можете:

• Запустите счетчик.
• Приложите обратный вызов «stop spinner» к событиям onComplete и onError (при условии, что вы используете наблюдаемые).
• Возврат наблюдаемого для операции async (например, HTTP-вызов).

Как отображается ваш счетчик, зависит от того, какую структуру CSS вы используете. Это может быть наложение, которое уменьшает полноэкранный режим (вроде модального) или небольшое уведомление в углу экрана.

Дальнейшее совершенствование: почему бы не заглянуть в службу Http (или использовать специализированную централизованную службу для переноса всех ваших HTTP-вызовов), чтобы вы могли запускать и останавливать счетчик при каждом вызове HTTP (при условии, что это желаемое поведение...). Таким образом, вам не придется обрабатывать ручную пуск и остановку счетчика в каждом из ваших разрешений.