Блог

Главная - Вопросы по программированию - Angular — Как создать загрузочный экран «как gmail»

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

#node.js #angular

#node.js #angular

Вопрос:

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

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

Я использую angular 6 во фронтальной части и Node js во внутренней части.

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

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

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

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

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

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

Ответ №1:

В index.html в корневом компоненте приложения я написал «загрузка …», как показано ниже.

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

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

 <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.

Ответ №2:

Вы должны начать использовать крючки жизненного цикла Angular. https://angular.io/guide/lifecycle-hooks

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

Ответ №3:

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