npm 包 ngx-rim-loader-bar 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

ngx-rim-loader-bar 是一个 Angular 的 Material 风格加载条组件，它允许开发者在应用的任何地方加入一个顶部加载条，让用户在页面加载的过程中能够看到进度。

该组件非常适用于大型应用，当应用有大量异步请求、图片等资源需要加载时，能够让用户明显感觉到加载的进度，提高了用户体验。

安装

npm install ngx-rim-loader-bar --save

用法

在 app.module.ts 中导入 NgxRimLoaderBarModule 模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxRimLoaderBarModule } from 'ngx-rim-loader-bar';

import { AppComponent } from './app.component';

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

在任何需要使用加载条的组件中，引入 NgxRimLoaderBarService 并在需要显示加载条时调用 start() 方法，在加载完成后调用 complete() 方法。
```
import { Component } from '@angular/core';
import { NgxRimLoaderBarService } from 'ngx-rim-loader-bar';
```

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-app';

 constructor(private loader: NgxRimLoaderBarService) {}

 ngOnInit() {
   this.loader.start(); // 显示加载条
   this.loadData().then(() => {
     this.loader.complete(); // 隐藏加载条
   });
 }

 private async loadData(): Promise<any> {
   // 在实际的业务代码中，这个 loadData 方法可能会是一个获取数据的异步请求
   await new Promise(resolve => setTimeout(resolve, 3000));
 }

}

## API

- `NgxRimLoaderBarService`

  1. `start(): void`：显示加载条，可以在需要显示加载条时调用。
  2. `complete(): void`：隐藏加载条，可以在加载完成后调用。

- `NgxRimLoaderBarComponent`

  - `@Input() color: string`: 加载条颜色，默认为 primary。
  - `@Input() mode: 'determinate' | 'indeterminate'`: 加载条模式，默认为 determinate。
  - `@Input() value: number`: 加载条进度，值为 0-100，默认为 0。

## 示例代码

```html
<!-- app.component.html -->
<ngx-rim-loader-bar></ngx-rim-loader-bar>

// app.component.ts
import { Component } from '@angular/core';
import { NgxRimLoaderBarService } from 'ngx-rim-loader-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';

  constructor(private loader: NgxRimLoaderBarService) {}

  ngOnInit() {
    this.loader.start();
    this.loadData().then(() => {
      this.loader.complete();
    });
  }

  private async loadData(): Promise<any> {
    await new Promise(resolve => setTimeout(resolve, 3000));
  }
}

总结

ngx-rim-loader-bar 组件不仅提供了一个优雅实用的加载条，同时也启示我们如何从用户体验出发，尽可能地让用户在前端应用的加载过程中获得反馈和支持。它让我们设计和实现交互更加舒适和美好，提高了应用的质量和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53e0f