如何在 ngOnInit 之后在页面加载时更新 属性

Question

我有一个 Ionic 4 应用程序，它从 firebase ngOnInit 中提取列表到页面 A。当我离开页面 A 并在不同的页面 B 上更新列表时，然后当我导航回页面 A 时列表没有更新。我必须关闭应用程序然后重新打开它才能获取更新的列表。我已经尝试了几种不同的生命周期 Angular 挂钩无济于事。

简单页面加载初始化后是否有生命周期？每当我导航回该页面时如何检查更新的列表？

  ngOnInit() {
    this.dataSvc.getItineraries()
    .get()
    .then( itineraryListSnapshot => {
      this.matchItinerary = [];
      itineraryListSnapshot.forEach(snap => {
        this.matchItinerary.push({
          id: snap.id,
          activities: snap.data().activities,
          destination: snap.data().destination,
          startDate: snap.data().startDate,
          endDate: snap.data().endDate,
          tripDetails: snap.data().tripDetails,
          userId: snap.data().userId
        });
      });
    });
  }

是的，我实际上是从未被破坏的服务中加载数据。

这里是实际服务

    getItineraries(): firebase.firestore.CollectionReference {
      return this.itineraryCollection;
    }

该集合是在服务的构造函数中创建的，只是 returns 所有用户的列表。

Answer 1

.get() returns 一个 Promise 并且因为 Ionic 缓存页面（如果你使用 Ionics router-outlet 我假设你这样做，因为如果你不这样做，组件将在之后被销毁你离开它，OnInit 会在你访问它之后再次被调用）。因此，当您再次访问组件时，不会调用 OnInit。幸运的是 Firestore 给出 onSnapshot() 观察你的 collection:

的变化

  ngOnInit() {
    this.dataSvc.getItineraries()
    .onSnapshot( (itineraryListSnapshot: QuerySnapshot) => {
      this.matchItinerary = [];
      itineraryListSnapshot.forEach(snap => {
        this.matchItinerary.push({
          id: snap.id,
          activities: snap.data().activities,
          destination: snap.data().destination,
          startDate: snap.data().startDate,
          endDate: snap.data().endDate,
          tripDetails: snap.data().tripDetails,
          userId: snap.data().userId
        });
      });
    });

您还可以提供error回调。 Read more here

p.s。你可能想使用 docChanges，但你可能不需要使用 onSnapshot() 方法。