Как предотвратить пустую страницу при переключении страницы в Angular 4 - PullRequest
Новая
       12

Как предотвратить пустую страницу при переключении страницы в Angular 4

0 голосов
/ 15 мая 2018

my app.component.ts
Шаблон: 

<commonLoading [hidden]="loading"></commonLoading>
<my-header></my-header>
<router-outlet class="router-outlet"></router-outlet>

Компонент commonLoading представляет собой счетчик с прозрачным фоном.

У меня есть 2 страницы (компонент A и компонент B). когда я переключаю компонент формы страницы A на компонент B. На html-странице отображается пустая страница.

Кажется, прогресс
страница A -> пусто -> страница B

Я ожидаю, когда я переключусь на компонент B с компонента A. HTML-код переключится на компонент B, только когда он будет готов.
страница A -> страница B

Я пытался сделать паузу в отладчике, когда пустое шоу.
HTML DOM вот так 

<app-root>
  <commonLoading></commonLoading>
  <my-header></my-header>
  <router-outlet></router-outlet>
  <componentA>
    <!--bindings={}-->
  </componentA>
</app-root>

и высота выше HTML не распространяется на весь экран, может быть только 30 высоты просмотра. поэтому на экране отображается пустой экран. Я сомневаюсь, что это можно решить.

1 Ответ

0 голосов
/ 15 мая 2018

В вашем основном компоненте (по умолчанию: AppComponent) Добавьте следующий код.

MyAppComponent.ts 

import { Component, OnInit } from '@angular/core';
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`
})
export class MyAppComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof RouteConfigLoadStart) {
        document.getElementById('pageLoader').style.display = 'block';
      } else if (event instanceof RouteConfigLoadEnd) {
        document.getElementById('pageLoader').style.display = 'none';
      }
    });
  }
}

В вашем Index.html выше app-В корневой тег добавьте любой загрузчик страниц, который вы хотите добавить, как показано ниже.

Index.html 

<!-- Page Loader -->
<div id="pageLoader" style="display: none">
    <!-- Add image loader here -->
    <img src="assets/page-loader.gif">
</div>

<app-root></app-root>

Здесь RouteConfigLoadStart сообщит, что маршрутизация запущена, и покажетloader и после завершения маршрутизации RouteConfigLoadEnd сработает и загрузчик снова будет скрыт.

...