angular - Bootstrap 后如何通过 APP_INITIALIZER 引用服务中设置的属性

Question

在我的 Angular 8 应用程序中，我想在应用程序加载之前从 API 调用中获取组织列表。我正在使用 APP_INITIALIZER 来这样做。但是，当应用程序完成加载时，服务上所选组织的属性不再按预期设置。

app.module.ts

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { OrganizationsService } from './services/organizations.service';

export function orgResolverFactory(provider: OrganizationsService) {
  return () => provider.setOrgs();
}

providers: [ SidenavService, OrganizationsService, { provide: 
  APP_INITIALIZER, useFactory: orgResolverFactory, deps: 
  [OrganizationsService], multi: true }
]

organizations.service.ts

@Injectable()
export class OrganizationsService {

 constructor(private http: HttpClient) {}
 orgs: any = [];
 selectedOrg: any;

 setOrgs() {
    return new Promise((resolve, reject) => {
      this.http.get<Org>(`/api/orgs`,{ observe: 'response' })
        .subscribe(resp => {
          this.selectedOrg = resp.body[0]
          // breakpoint here shows this.selectedOrg is set
          resolve(true);
        });
      })
  }

  public getSelectedOrg() {
    return this.selectedOrg;
  }

}

metrics.service.ts

import { Org, OrganizationsService } from './organizations.service';

@Injectable()
export class MetricService {
  selectedOrg: any;

  constructor(private http: HttpClient, private organizationsService: 
  OrganizationsService) {
    this.selectedOrg = this.organizationsService.getSelectedOrg();
    // breakpoint shows this.selectedOrg is undefined
  }
}

我不知道为什么 OrganizationsService 中的 selectedOrg 在应用程序加载后未定义。我希望能够在指标服务中引用 selectedOrg 以进行进一步的 API 调用。如何在应用程序加载之前设置此参数并在之后引用它？这是正确的方法吗？

Answer 1

最后，我决定从使用服务转为使用通用提供程序。这使我可以根据需要设置和检索属性。对于我上面的代码，服务通常在运行时实例化。即使我在初始化之前使用我的服务，它也会在应用程序加载时被重置。想在此处发布此答案，以防其他人正在寻求做类似的事情并遇到类似的问题。

org-provider.ts

import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class OrgsProvider {

    private selectedOrg: any = null;
    private orgs: any = null;

    constructor(private http: HttpClient) {

    }

    public getSelectedOrg() {
        return this.selectedOrg;
    }

    public getOrgs() {
        return this.orgs;
    }

    loadOrgs() {
      return new Promise((resolve, reject) => {
        this.http.get(`/api/orgs`,{ observe: 'response' })
          .subscribe(resp => {
            this.orgs = resp.body
            this.selectedOrg = resp.body[0]
            resolve(true);
          });
        })
    }

    setSelectedOrg(id:number){
      this.selectedOrg = this.orgs.find((org)=>{
        return org.id == id
      })
      return this.selectedOrg
    }

}