Angular 如何在引导后引用APP_初始值设定项在服务中设置的属性

在Angular 8应用程序中，我希望在加载应用程序之前从API调用中获取组织列表。我正在使用APP_初始值设定项来执行此操作。但是，当应用程序加载完成时，服务上选定组织的属性不再按预期设置

应用程序模块.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 }
]

@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;
  }

}

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
  }
}

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
    }

}

组织.服务.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 }
]

@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;
  }

}

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
  }
}

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
    }

}

---

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

最后，我决定从使用服务转向使用通用提供商。这允许我根据需要设置和检索属性。在我上面的代码中，服务通常在运行时实例化。尽管我在初始化之前使用了我的服务，但在加载应用程序时它被重置了。想在这里发布这个答案，以防其他人正在寻找做类似的事情，并有类似的问题

org provider.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 }
]

@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;
  }

}

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
  }
}

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
    }

}

---

第一个API调用是否成功？其中的响应数据是什么？是的，

/api/orgs/

在第一次调用时成功返回。它返回一个对象数组，selectOrg被正确地分配给第一个索引。