Angular2-Busy 项目常见问题解决方案

Angular2-Busy 项目常见问题解决方案

angular2-busy Show busy/loading indicators on any promise, or on any Observable's subscription. 项目地址: https://gitcode.com/gh_mirrors/an/angular2-busy

项目基础介绍

Angular2-Busy 是一个用于在 Angular 2+ 应用中显示繁忙/加载指示器的开源项目。它可以在任何 Promise 或 Observable 的订阅上显示加载指示器。该项目是基于 Angular 2 重写的 angular-busy，并添加了一些新的特性。Angular2-Busy 主要使用 TypeScript 和 Angular 框架进行开发。

新手使用注意事项及解决方案

1. 安装和引入 CSS 文件

问题描述：新手在安装 Angular2-Busy 后，可能会忘记引入 CSS 文件，导致加载指示器无法正常显示。

解决步骤：

1. 在项目的 index.html 文件中，添加以下代码以引入 CSS 文件：

   <link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">
   

2. 确保在项目中正确安装了 Angular2-Busy 依赖：

   npm install --save angular2-busy
   

2. 模块导入错误

问题描述：新手在导入 BusyModule 时可能会出现模块未找到的错误。

解决步骤：

1. 在项目的根模块（通常是 app.module.ts）中，确保正确导入 BusyModule：

   import { NgModule } from '@angular/core';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { BusyModule } from 'angular2-busy';
   
   @NgModule({
     imports: [
       BrowserAnimationsModule,
       BusyModule
     ],
   })
   export class AppModule { }
   

2. 确保在项目的 tsconfig.json 文件中正确配置了模块路径解析。

3. 使用 ngBusy 指令时的语法错误

问题描述：新手在使用 ngBusy 指令时可能会遇到语法错误，特别是在绑定 Promise 或 Observable 时。

解决步骤：

1. 确保在组件中正确声明并初始化 busy 变量：

   import { Component, OnInit } from '@angular/core';
   import { Http } from '@angular/http';
   
   @Component({
     selector: 'some',
     template: `
       <div [ngBusy]="busy"></div>
     `
   })
   export class SomeComponent implements OnInit {
     busy: Promise<any>;
   
     constructor(private http: Http) {}
   
     ngOnInit() {
       this.busy = this.http.get('').toPromise();
     }
   }
   

2. 如果使用 Observable 的订阅，确保正确导入 Subscription 并使用：

   import { Subscription } from 'rxjs';
   
   export class SomeComponent implements OnInit {
     busy: Subscription;
   
     ngOnInit() {
       this.busy = this.http.get('').subscribe();
     }
   }
   

通过以上步骤，新手可以更好地理解和使用 Angular2-Busy 项目，避免常见的问题。

angular2-busy Show busy/loading indicators on any promise, or on any Observable's subscription. 项目地址: https://gitcode.com/gh_mirrors/an/angular2-busy