Question

我的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页 - ＆gt;空白 - ＆gt;第B页

我的期望是当我从组件A切换到组件B时。只有在准备就绪时，html才会切换到组件B. 第A页 - ＆gt;第B页

我在空白节目时试图暂停调试器这样的HTML DOM

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

以上HTML的高度并未覆盖整个屏幕，可能只有30个视图高度。所以屏幕显示一个空白屏幕。我怀疑它是否可以解决。

Answer 1

在您的主要组件中（默认值：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-root标记中添加您要添加的任何页面加载器，如下所示。

<强>的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将指示路由已启动并将显示加载程序，并且路由已完成RouteConfigLoadEnd将触发并且加载程序将再次隐藏。

如何在Angular 4中切换页面时防止空白页面

1 个答案: