Question

我是Angular的新手，目前正在使用Angular6进行开发。这是我的查询。在我的应用程序启动之前，我需要调用三个服务，为我提供一些应用程序配置。让我们将服务称为Initialization，Conifg和UserDetails。因此，我将服务添加到了app-module.ts文件中，如下所示。

`

    export function init_app(initService: InitializationService) {
        return () => initService.getInit();
    }

    export function get_settings(configService: ConfigService) {
        return () => configService.getConfig();
    }
export function get_user_settings(userDetails: UserDetailsService) {
        return () => userDetails.getSettings();
    }

    @NgModule({
      imports: [/*my-imports*/],
      providers: [
        AppLoadService,
        { provide: APP_INITIALIZER, useFactory: init_app, deps: [InitializationService], multi: true },
        { provide: APP_INITIALIZER, useFactory: get_settings, deps: [ConfigService], multi: true },
        { provide: APP_INITIALIZER, useFactory: get_user_settings, deps: [UserDetailsService], multi: true }
      ]
    })

` 现在，InitializationService具有其他两个服务正常工作所需的一些值。在app_init中，服务请求将立即发送。

我仅在完成InitializationService调用后才需要调用ConfigService和UserDetailsService。

为解决这个问题，我已经完成了

// AppConfig.ts

export class AppConfig {
  public static Config= {};

  public static $subject = new Subject();
}

// InitializationService

getInit () {

const promise = new Promise((resolve, reject) => {
      this.http.get().then(val => {
        AppConfig.config = val;
        AppConfig.$subject.next(val);
      });
};

return promise;
}

// ConfigService

getConfig () {
 if(AppConfig.Config.baseUrl === undefined) {
   AppConfig.$subject.subscribe(val => {
     this.http.get(AppConfig.Config.baseUrl).then(//doSomething);
   })
 }
}

所以我创建了一个静态主题并订阅了它。初始化服务完成后，它将发送主题的下一个值，该值现在已由Config服务订阅和侦听。收到订阅电话后，我将进行进一步的操作。

我的UserDetails getSettings（）调用重复了相同的代码。

我的方法正确吗？还有其他尝试和测试过的模式吗？

有什么建议或更好的方法可以解决上述问题？

谢谢。

关于， w

Answer 1

使用一个初始化程序并控制那里的整个流程：

export function initAll(initService: InitializationService, configService: ConfigService, userDetails: UserDetailsService) {
  return () => {
    return initService.getInit().pipe(
      switchMap(() => {
        return flatMap([ConfigService.getConfig(), userDetails.getSettings()]);
      }),
    );
  }
}

请注意，flatMap假定两项操作均已完成；但是，这只是要走的路。您可以完全控制rxjs运算符的过程。而且，您只有一个APP_INITIALIZER

Answer 2

//应用模块代码

export function initAll(appInitService:AppInitService, configService:ConfigService) {
  // return a promise because thats what the app_init token expects. there is an open ticket with angular related to this. https://github.com/angular/angular/issues/15088
  return () => {
    const promise = new Promise((resolve, reject) => {
      appInitService.load().then(() => {
        configService.fetch().then(() => {
          resolve();
        });
      });
    });
    return promise;
  }
}

// appInitService.load（）调用

const promise = this.http.get<any>(`myConfigURL`).toPromise();
promise.then(response => {
 Object.assign(AppConfig.ENV, response.value.parameters);
});
return promise;

//配置服务调用

const promise = this.http.get<any>(myConfigUrl).toPromise();
promise.then(response => {
  //do something with response
});
return promise;

之所以采用这种方法，是因为它解决了我拥有和维护Subject的问题。另外，我的时间很短，无法尝试调试Observable东西出了什么问题。

不过感谢您的答复。

角度APP_INITIALIZER

2 个答案: