【发布时间】：2019-12-26 15:12:45
【问题描述】：
我一直在尝试将我的 Angular 应用程序制作成一个 Angular Universal 应用程序，该应用程序从 Firebase Firestore 获取数据。
我一直遵循以下指南：
https://fireship.io/lessons/angular-universal-firebase/
初始编译和一切工作正常，即使在 valueChanges() 方法的帮助下从 Firestore 获取数据时也可以解决问题。
但是，如果我将valueChanges() 更改为get() 并在DocumentSnapshot 上调整所需的东西，似乎通用不会等待数据被获取并被渲染。
模板文件
<div class="desc" *ngIf="(task | async) as ts">
{{ts.description}}
</div>
工作代码
export class Task {
colRef: AngularFirestoreCollection;
constructor(private db: AngularFirestore) {
this.colRef = this.db.collection(this.COL_NAME);
}
ngOnInit() {
this.task = this.colRef.doc(id).valueChanges();
}
}
代码无效
export class Task {
colRef: AngularFirestoreCollection;
constructor(private db: AngularFirestore) {
this.colRef = this.db.collection(this.COL_NAME);
}
ngOnInit() {
this.task = this.colRef.doc(id).get().pipe(map(docSnapshot => docSnapshot.data()));
}
}
【问题讨论】：
-
您找到解决方案了吗？
-
@RafaelCerávolo 我还没有找到解决方案。我通过构建一个 HTTP 函数然后在 Angular 端使用 HttpClient 来解决它。这解决了这个问题，但不是我希望它发生的方式，因为它也涉及编写函数代码。
-
我最终做的是通过 snapshotChanges() 更改 get() 并测试 isPlataformBrowser() 以在客户端获得第一个结果后取消订阅（因为使用 first() 的管道也是不等待渲染或有时无限期挂起），并且在服务器端永远不会取消订阅。我不知道在服务器端打开一个snapshotChanges的副作用，但我希望angular Universal在完成渲染过程后释放所有资源！
标签： firebase google-cloud-firestore angularfire2 angular-universal