ngx-ui-loader 使用教程

ngx-ui-loader 使用教程

ngx-ui-loaderMultiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+项目地址:https://gitcode.com/gh_mirrors/ng/ngx-ui-loader

项目介绍

ngx-ui-loader 是一个为 Angular 应用设计的加载器库，支持前景和背景的加载指示器、进度条以及多个加载器。它可以帮助开发者提升用户体验，通过在数据加载或页面跳转时显示加载动画，避免用户在等待过程中的焦虑感。

项目快速启动

安装

首先，通过 npm 安装 ngx-ui-loader：

npm install --save ngx-ui-loader

配置

在 Angular 项目的根模块中导入 NgxUiLoaderModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxUiLoaderModule } from 'ngx-ui-loader';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 导入 NgxUiLoaderModule
    NgxUiLoaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用

在应用的根模板中使用 ngx-ui-loader 组件：

<ngx-ui-loader></ngx-ui-loader>

启动和停止加载器

在组件中注入 NgxUiLoaderService 并控制加载器的启动和停止：

import { Component, OnInit } from '@angular/core';
import { NgxUiLoaderService } from 'ngx-ui-loader';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private ngxService: NgxUiLoaderService) {}

  ngOnInit() {
    this.ngxService.start(); // 启动加载器

    // 5秒后停止加载器
    setTimeout(() => {
      this.ngxService.stop();
    }, 5000);
  }
}

应用案例和最佳实践

显示进度条

在加载过程中显示进度条可以提供更好的用户体验：

this.ngxService.start();
this.ngxService.stop();

多个加载器

在需要多个加载器的场景中，可以为每个加载器设置不同的 ID：

<ngx-ui-loader loaderId="loader1"></ngx-ui-loader>
<ngx-ui-loader loaderId="loader2"></ngx-ui-loader>

自动显示加载器

通过配置 NgxUiLoaderRouterModule 和 NgxUiLoaderHttpModule，可以自动在路由变化和 HTTP 请求时显示加载器：

import { NgxUiLoaderRouterModule } from 'ngx-ui-loader';
import { NgxUiLoaderHttpModule } from 'ngx-ui-loader';

@NgModule({
  imports: [
    NgxUiLoaderModule,
    NgxUiLoaderRouterModule,
    NgxUiLoaderHttpModule
  ]
})
export class AppModule { }

典型生态项目

ngx-ui-loader 可以与 Angular 生态系统中的其他项目结合使用，例如：

• Angular Material: 结合 Angular Material 组件库，提供一致的视觉风格。
• NgRx: 在状态管理中使用加载器，提升应用的响应性和用户体验。
• Angular Universal: 在服务端渲染中使用加载器，优化首屏加载时间。

通过这些结合使用，可以进一步提升 Angular 应用的性能和用户体验。

ngx-ui-loaderMultiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+项目地址:https://gitcode.com/gh_mirrors/ng/ngx-ui-loader