如何在Angular2中使用导航进行路由时显示加载屏幕？

Posted 2023-03-05

【中文标题】如何在Angular2中使用导航进行路由时显示加载屏幕？

【英文标题】：How to display loading screen while routing using navigation in Angular2?

【发布时间】：2018-08-23 20:20:12

【问题描述】：

我尝试过this solution，但无法正常工作。我对 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>

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

【问题讨论】：

同时路由或api调用？

目前在路由@ManikandanVelayutham 时，但如果我同时获得这两者会很好，因为在此之后我还将从 json 文件（在 src/app/mydata.json 中）获取数据。 .

你有什么错误吗？..navigationInterceptor 触发？

no.. 控制台上没有任何内容 @ManikandanVelayutham 。当我评论 Navigationend, ..cancle, ..error 时；图像显示

【参考方案1】：

我找到了解决方案。如果将来有人需要，请发布它。 这就是我所做的...我将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>

【参考方案2】：

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

【讨论】：

那我应该用什么？请建议

可以创建一个loader服务，在路由之间使用，而不是settimeout