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;
    }

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

Answer 1

.get()返回一个Promise，并且因为Ionic缓存页面（如果您使用Ionics router-outlet，并且我假设您这样做了，因为如果不这样做，则在离开它和{{ 1}}将在您访问它后再次调用。因此，当您再次访问组件时，不会调用OnInit。幸运的是，Firestore以OnInit的形式给出了您的收藏夹中的更改的信息：

onSnapshot()

您还可以提供 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 }); }); }); 回调。 Read more here

p.s。并且您可能想使用docChanges，但可能不需要使用error方法。