Как правильно настроить заставку на Angular 6?

Question

Я пытался настроить экран-заставку, чтобы он отображался до полной загрузки моего логина.Это мой 'login.component.html'.

<my-splash-page> </my-splash-page>
<div class="">
  <header >
    <ul>
      <li>
 ....

Теперь, что должен содержать компонент-заставка, я не понимаю, я пытался использовать некоторые значения подписки, но это не совсем работает.

this.subscription = this.splashService.splashState
      .subscribe((state: LoaderState) => {
        this.show = state.show;
      });

Переменная show должна определять, появляется она или нет.

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

Экран-заставка может исчезнуть после того, как все загружено (картинки, шрифты, значки), но не может заставить его работатьтаким образом.

Answer 1

Вместо добавления в login.html вы можете добавить div с классом splashscreen, который будет отображать изображение заставки внутри index.html .

<div class="splashScreenClass" id="splashScreenClass">
    <h1>Loading...</h1>
</div>

В app.component.ts

Вы можете удалить из DOM.

ngOnInit(){
  const splashScreen: HTMLElement = document.getElementById('splashScreenClass');
    if (splashScreen) {
      splashScreen.remove();
    }
}