Angular 4 - Call database API only once for 2 components

Question

Gurus, please help.

1. service - Having a method getConfig() to fetch the data from database and storing the output in BehaviourSubject observable ConfigArray$

2. app.component.ts - Calls getConfig() first and emits the output to ConfigArray$

3. status.component.ts - I am using resolver route to prepopulate the data for this component which needs the same data/output got from app.component.ts getConfig() AIP call.

I tried different approaches like using setInterval, promise, observable to wait for appl.component.ts getConfig() method to be completed then pass it to status.component.ts resolver route, but non of those working.

I am not sure what I am doing is correct, can anyone please help how to address this requirement?

Thank you.

Code:

Thank you Catalyst for your quick response. Here is the complete code:

config.service.ts

@Injectable()
export class ConfigService {
  private configsArray = new BehaviorSubject<Config>(undefined);
  configsArray$ = this.configsArray.asObservable().first();
  updateConfigs(configs: Config) {
    this.configsArray.next(configs)
  }

  getConfigs() {
    let initialLoad: number = 0;
    let initialLoadDone: boolean = false;
    if (this.fetchConfigs) == 'NotFetched') {
       // if it meets this if condition it is working
       let headers = new Headers();
       headers.append('Content-Type','application/json');
       this.updateFetchConfigs('Fetching');
       return this.http.get('http://localhost:8080/sample1/api/config', { headers: headers }).map((response: Response) => response.json());
    }
    else {
       // if it does not meet this if condition it is not working
       Observable.interval(1)
       .takeWhile(() => !initialLoadDone)
       .subscribe(() => { 
          ++initialLoad;
          if (this.getConfigs1(this.fetchConfigs$) == 'Fetched' || initialLoad > 10000) {
             initialLoadDone = true;
             return this.configsArray$;
          }
       });
    }
  }
}

config-resolver.service.ts

@Injectable()
export class ConfigResolver implements Resolve<Config> {
  config: Config;

  constructor(private configService: ConfigService, private router:Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Config> | Promise<Config> | Config {
    return this.configService.getConfigs().map(     
      data => {
        return data;
      }
    );
  }

}

status.component.ts

export class StatusComponent implements OnInit, OnDestroy {

  constructor(private configService:ConfigService,
              private route: ActivatedRoute,
              private router: Router) {}

  ngOnInit() {
    this.configSubscription = this.route.data.subscribe(
        (data: Data) => {
          this.test = data['config'];
        }
    );
  }

}