首页 > web前端 > css教程 > 如何在 Angular 中的路线转换期间实现加载屏幕?

如何在 Angular 中的路线转换期间实现加载屏幕?

Patricia Arquette
发布: 2024-12-07 14:57:12
原创
663 人浏览过

How to Implement a Loading Screen During Route Transitions in Angular?

在 Angular 2 中的路由转换期间显示加载屏幕

Angular Router 提供导航事件,使您能够监视更改并相应地修改 UI。这些事件包括 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError。

使用导航事件

要在路线更改期间显示加载屏幕,您可以在根组件(通常是应用程序)中订阅这些导航事件.component.ts) 并根据触发的特定事件切换加载 UI。

首先,从@angular/router 并在根组件中定义一个布尔标志,loading。

import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  loading = true; // Initializing to true to show loading spinner on first load
  constructor(private router: Router) {
    this.router.events.subscribe((e : RouterEvent) => {
       this.navigationInterceptor(e);
     })
  }
}
登录后复制

在 navigationInterceptor 方法中,您可以监听 NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError 事件并切换加载标志基于每个事件。

  // 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;
    }
    if (event instanceof NavigationCancel) {
      this.loading = false;
    }
    if (event instanceof NavigationError) {
      this.loading = false;
    }
  }
登录后复制

在根模板中,您可以使用条件渲染来根据加载显示加载叠加层标志的状态。

<div>
登录后复制

通过遵循此方法,您可以在 Angular 2 应用程序中的路线转换期间有效地显示加载屏幕。

性能优化

如果性能为一个问题,您可以利用 NgZone 和 Renderer 来增强加载微调器的性能,如更新的代码片段所示如下:

private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }
    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // 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._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
登录后复制

此技术在更新微调器的不透明度时绕过 Angular 的更改检测机制,从而实现更平滑的过渡。

以上是如何在 Angular 中的路线转换期间实现加载屏幕?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板