Angular - 如何使用 APP_INITIALIZER 加载应用程序时显示等待指示器

服务器

使用Angular的APP_INITIALIZER加载应用程序时显示等待指示器

在Angular应用程序中，有时我们希望在应用程序初始化时执行一些操作，例如加载配置、验证用户身份等。Angular提供了一个强大的特性，即APP_INITIALIZER，可以在应用程序启动时运行一些初始化逻辑。在这篇文章中，我们将讨论如何使用APP_INITIALIZER来加载应用程序时显示等待指示器，并提供一个简单的案例代码。

Angular中的APP_INITIALIZER

APP_INITIALIZER是Angular框架提供的一个注入令牌，它允许我们在应用程序初始化阶段执行一些代码。我们可以使用它来执行需要在应用程序启动时完成的操作，例如从服务器加载配置或验证用户身份。

显示等待指示器

在许多应用程序中，加载数据或执行其他初始化操作时，我们通常希望向用户显示一个等待指示器，以提供良好的用户体验。通过在APP_INITIALIZER中使用等待指示器，我们可以在应用程序加载过程中向用户传达信息，让他们知道应用程序正在初始化。

在Angular中使用APP_INITIALIZER显示等待指示器的步骤

1. 创建一个等待指示器服务

我们首先需要创建一个等待指示器服务，该服务将负责管理和显示等待指示器。以下是一个简单的等待指示器服务的示例：

typescript
   import { Injectable } from '@angular/core';
   @Injectable({
     providedIn: 'root'
   })
   export class LoadingIndicatorService {
     private _isLoading: boolean = false;
     get isLoading(): boolean {
       return this._isLoading;
     }
     show() {
       this._isLoading = true;
     }
     hide() {
       this._isLoading = false;
     }
   }
   

2. 使用APP_INITIALIZER设置等待指示器

接下来，我们将使用APP_INITIALIZER来执行一些初始化逻辑，并在此期间显示等待指示器。我们将在应用程序的根模块中进行设置。以下是一个示例：

typescript
   import { APP_INITIALIZER, NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { LoadingIndicatorService } from './loading-indicator.service';
   export function initializeApp(loadingIndicatorService: LoadingIndicatorService) {
     return () => {
       loadingIndicatorService.show();
       // 执行其他初始化逻辑，例如加载配置
       loadingIndicatorService.hide();
     };
   }
   @NgModule({
     imports: [BrowserModule],
     declarations: [],
     providers: [
       LoadingIndicatorService,
       {
         provide: APP_INITIALIZER,
         useFactory: initializeApp,
         deps: [LoadingIndicatorService],
         multi: true,
       },
     ],
     bootstrap: [],
   })
   export class AppModule {}
   

在上面的例子中，initializeApp函数被用作APP_INITIALIZER的工厂函数。在这个函数中，我们显示等待指示器，执行初始化逻辑，然后隐藏等待指示器。

示例代码演示

在上述步骤完成后，您的应用程序将在初始化期间显示等待指示器，并在初始化完成后隐藏它，以提供更好的用户体验。

注意： 以上代码示例是一个简化版本，实际应用中可能需要更复杂的逻辑和样式来处理等待指示器的显示和隐藏。

通过使用Angular的APP_INITIALIZER，我们可以在应用程序初始化期间执行必要的操作，并通过显示等待指示器向用户传达正在进行的过程。这有助于改善用户体验，让用户了解应用程序初始化的进度。