在 angular 10 中使用异步服务方法作为工厂提供者

Question

我正在开发一个 Angular 10 的应用程序，我必须在向用户显示该应用程序之前执行各种初始化。

我是 Angular 和 Typescript 的新手，我正在尝试根据通过谷歌搜索网络找到的示例来执行此操作。

到目前为止我已经这样做了，这应该让应用程序在启动前等待 10 秒，但它还没有起作用。

我使用以下代码创建了一个 AdminutilsService：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class AdminutilsService {

  constructor() { }

  loadCustomerConfig(): (() => Promise<boolean>) {
    return (): Promise<boolean> => {
      return new Promise<boolean>((resolve: (a: boolean) => void): void => {
        setTimeout(() => resolve(true), 10000);
      });
    };
  }

}

在app.module.ts中，我添加了：

import { AdminutilsService } from './adminutils.service';
export function loadCustomerConfigFactory(myAdminutilsService: AdminutilsService) {
     return () => myAdminutilsService.loadCustomerConfig();
}

还有@NgModule:

  providers: [{
    provide: APP_INITIALIZER,
    useFactory: loadCustomerConfigFactory,
    deps: [AdminutilsService],
    multi: true
  }],

编译完成，因为我只有一个在线警告

export function loadCustomerConfigFactory(AdminutilsService: AdminutilsService) {

预期调用签名：'loadCustomerConfigFactory' 有一个 typedef (typedef)

但是当我启动应用程序时，并没有像预期的那样延迟 10 秒。

请指教

Answer 1

你让它变得比必要的复杂得多。

下面的简化代码应该可以工作：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AdminutilsService {
  loadCustomerConfig(): Promise<boolean> {
    return new Promise<boolean>(resolve => {
      setTimeout(() => resolve(true), 10000);
    });
  }
}

在app.module.ts中：

import { AdminutilsService } from './adminutils.service';

export function loadCustomerConfigFactory(myAdminutilsService: AdminutilsService) {
  return () => myAdminutilsService.loadCustomerConfig();
}

我还设置了一个StackBlitz用于演示。 “正在加载”显示 10 秒，然后 Angular 应用程序初始化。

在 angular 10 中使用异步服务方法作为工厂提供者

use async service method as factory provider in angular 10

asynchronous

factory

angular