我正在服务构造函数中调用loadUserData()。但是,在首次加载页面时,未定义相关的可观察对象。但是,当我从组件中显式调用load函数时,它可以工作。 请参阅component.ts文件中的两个实现 ngOnInit()
。使用app.module.ts中的ModuleWithProviders
界面和静态forRoot()
提供此服务。 如果我手动导航离开然后返回此页面,则resumeData$
可操作。而且我不必从component.ts文件中调用loadUserdata()。我在这里想念什么?
加载数据服务文件
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);
});
}
刚发现,即使在成功通过身份验证后,也不从builder()调用loadUserData()。现在寻找原因。