0

我已经尝试过这个解决方案，但无法让它工作。我对 Angular2 完全陌生（不了解 AngularJS）。那么加载屏幕没有出现，我想我需要添加一些时间，以便它有一些时间显示，但我不知道在哪里以及如何显示。

app.component.ts

import {Component} from '@angular/core';
    import {
      Router,
      // import as RouterEvent to avoid confusion with the DOM Event
      Event as RouterEvent,
      NavigationStart,
      NavigationEnd,
      NavigationCancel,
      NavigationError
    } from '@angular/router';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./loadingCSS.css']
    })

    export class AppComponent {
    // Sets initial value to true to show loading spinner on first load
      loading = true;

      constructor(private router: Router) {
        router.events.subscribe((event: RouterEvent) => {
         this.navigationInterceptor(event);
      });
    }

      // Shows and hides the loading spinner during RouterEvent changes
      navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
          this.loading = true;
        }
        if (event instanceof NavigationEnd) {
          this.loading = false;
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
          this.loading = false;
        }
        if (event instanceof NavigationError) {
          this.loading = false;
        }
      }


app.component.html

<a [routerLink]="['/ArrayOP']"><button>Array operation</button></a>
<a [routerLink]="['/Calci']"><button>Calculator</button></a>
<div class="loading-overlay" *ngIf="loading">
  Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</div>
<router-outlet></router-outlet>

我想实现加载屏幕显示在整个应用程序的每个路由中，而我试图显示的加载屏幕就是这个（代码参考）。任何建议都会有很大帮助。

4

2 回答 2

4

我找到了解决方案。如果将来有人需要它，请发布它。
这就是我所做的......我将setTimeout功能添加到app.component.ts作为

import {
  Component
} from '@angular/core';
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./loadingCSS.css']
})

export class AppComponent {
  // Sets initial value to true to show loading spinner on first load
  loading = true;

  constructor(private router: Router) {
    router.events.subscribe((event: RouterEvent) => {
      this.navigationInterceptor(event);
    });
  }

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      setTimeout(() => { // here
        this.loading = false;
      }, 2000);
    }

    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      setTimeout(() => { // here
        this.loading = false;
      }, 2000);
    }
    if (event instanceof NavigationError) {
      setTimeout(() => { // here
        this.loading = false;
      }, 2000);
    }
  }


并将 HTML 更改为

<div class="loading-overlay" *ngIf="loading">
  Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</div>
<div *ngIf="!loading">
  <router-outlet></router-outlet>
</div>
于 2018-03-15T10:27:10.253 回答
0

设置的超时将起作用，但它不是正确的工作方式，因为如果从一条路由切换到另一条路由时，它仍会显示数据延迟。为了获得更好的结果，请不要使用设置的超时

于 2019-07-24T08:31:31.657 回答