Angular - Как создать загрузочный экран «как в gmail» - PullRequest
Новая
       1

Angular - Как создать загрузочный экран «как в gmail»

1 голос
/ 15 апреля 2019

В моем угловом приложении загрузочный счетчик работает по всему приложению.используя условия NavigationStart и NavigationEnd.

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

Я использую угловой 6 впереди и Node js во внутреннем интерфейсе.

Есть ли способ включить спиннер и отключить его после загрузки страницы.

Невозможно поместить загрузчик внутри какого-либо компонента, поскольку сам компонент не отображается на этом этапевремени.?(как вы можете себе представить!)

Требуется ли поместить спиннер в index.html или есть способ проверить условие, чтобы узнать, полностью ли отображаются компоненты .?

Потому что для пользователей с очень медленным интернет-соединением страница выглядит мертвой даже до загрузки страницы входа в систему.

Я добавил код в компонент входа в систему и ожидал, что счетчик будет работать.

Но счетчик не отображается, пока не будет инициализирован компонент входа в систему.

Ответы [ 3 ]

1 голос
/ 15 апреля 2019

В index.html в компоненте app-root я написал «loading ...», как показано ниже. 

<body>
    <app-root>
       Loadingg.......
    </app-root>
</body>

Всякий раз, когда приложение и его дочерние компоненты отображаются, это Загрузка ... была автоматически переопределена под углом.Я предполагаю, что все компоненты будут отображаться только в.(Если вы хотите добавить Загрузка .. к любому отдельному компоненту, вы можете написать, как показано ниже). 

<app-your-wish-component>
     Loadingg....
<app-your-wish-component> // Until and less this component is not rendered **Loading...** will be displayed after that component loads **Loading...** will automatically gone.
0 голосов
/ 15 апреля 2019

Я думаю, что лучшим подходом было бы добавить спиннер в качестве «фиксированного / статического» контента в index.html, чтобы это была первая немедленная вещь, загружаемая на ваш сайт.

0 голосов
/ 15 апреля 2019

Вы должны начать использовать Angular Lifecycle Hooks. https://angular.io/guide/lifecycle-hooks

Что касается обновления страницы, ваш лучший друг будет ngOnInit() в большинстве случаев

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...