在首页加载时可观察到的未定义-提供了有效和非有效的实施方式,寻找原因

I am calling loadUserData() in the service constructor. But the related observable is not defined, when the page is loaded for the first time. However, when I call the load function explicitly from the component, it works. Please see the two implementations in ngOnInit() in the component.ts file. This service is provided using ModuleWithProviders interface with a static forRoot() in the app.module.ts. If I manually navigate away and then come back to this page, the resumeData$ obervable works. and I don't have to call loadUserdata() from the component.ts file. What am I missing here ?

加载数据服务文件

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from '../model/user.model';
import { ResumeData } from '../model/resumeData.model';
import { Observable, of } from 'rxjs';
import { map, first } from 'rxjs/operators';
import { convertSnaps } from './db-utils';
import { Summary } from '../model/summary.model';
import { Category } from '../model/skill.model';
import { Education } from '../model/education.model';
import { CoreCompetency } from '../model/competency.model';

@Injectable()
export class LoadFirestoreDataService {
  user: firebase.User | null;
  summaryList$: Observable<Summary[]>;
  categoryList$: Observable<Category[]>;
  educationList$: Observable<Education[]>;
  coreCompetencyList$: Observable<CoreCompetency[]>;
  resumeData$: Observable<ResumeData[]>;

  constructor(private db: AngularFirestore, private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.user = user;
        this.loadUserData();
      } else {
        this.user = null;
      }
    });
  }

  loadUserData(): Observable<ResumeData[]> {
    // console.log(this.user);
    const user = <User>JSON.parse(localStorage.getItem('user'));
    // console.log(userId);
    // if (user.uid) {
    this.resumeData$ = this.db
      .collection('users')
      .doc(user.uid)
      .collection('userData')
      .snapshotChanges()
      .pipe(map(snaps => convertSnaps<ResumeData>(snaps)));

    return this.resumeData$;
  }
}

component.ts文件

  ngOnInit() {
// Following does not work
    this.dataService.resumeData$.subscribe(data => {
      console.log(data);
    });
// Following works 
    this.dataService.loadUserData().subscribe(data => {
      console.log(data);
    });

  }