angular - 来回更改路线后可观察到的数据消失了

Question

我一直在开发 Angular 应用程序。我有一个 events.service，它包含一个方法 getEvents()，它从我拥有的 Angular Firestore 集合中返回一个类型为 Event 的 Observable。

在我的 homepage.component 中，我的 getEvents() 方法订阅了事件集合的 valueChanges()，它将集合存储到我的数组 Event 的局部变量。

现在，它工作得很好，订阅也很完美。我在 Firestore 中添加、修改或删除的任何文档都会在我的客户端中实时更新。非常酷的东西。

问题是当我路由到另一个页面，然后导航回我的主页时，我的本地变量是空的!我不知道为什么。

这是我的代码:

app.module.ts

const appRoutes: Routes = [
    { path: "", redirectTo: "/login", pathMatch: "full" },
    { path: "login", component: LoginComponent },
    { path: "signup", component: SignupComponent },
    { path: "home", component: HomepageComponent, canActivate: [AuthGuard] },
    {
      path: "reservepage/:id",
      component: ReservePageComponent
    },
    { path: "scan", component: ScanPageComponent },
    { path: "create", component: CreateEventPageComponent },
    { path: "preview/:id", component: PreviewEventPageComponent }
  ];

event.service.ts

    // Angular imports
    import { Injectable } from "@angular/core";

    // Angular Fire Imports
    import {
      AngularFirestore,
      AngularFirestoreCollection,
      AngularFirestoreDocument,
      fromDocRef
    } from "angularfire2/firestore";
    import { AngularFireAuth } from "angularfire2/auth";
    import * as firebase from "firebase";

    // Internal imports
    import { Event } from "./event";
    import { AuthService } from "../auth/auth.service";

    // rxjs imports
    import { Observable, of } from "rxjs";
    import { map } from "rxjs/operators";

    @Injectable({
      providedIn: "root"
    })
    export class EventsService {
      constructor(
        private angularFirestore: AngularFirestore,
        private authService: AuthService,
        private firebaseAuth: AngularFireAuth
      ) {}

      collection: AngularFirestoreCollection<
        Event
      > = this.angularFirestore.collection("events");
      collection$: Observable<Event[]> = this.collection.valueChanges();

      document: AngularFirestoreDocument<Event>;
      document$: Observable<Event>;

      id: string;

      add(
        _name: string,
        _description: string,
        _photoURL: string,
        _address?: string,
        _totalTickets?: number,
        _ticketsSold?: number,
        _ticketsAvailable?: number
      ) {
        this.collection
          .add({
            id: "",
            name: _name,
            description: _description,
            photoURL: _photoURL,
            uid: this.firebaseAuth.auth.currentUser.uid,
            address: _address,
            totalTickets: _totalTickets
          })
          .then(docRef => {
            this.collection.doc(docRef.id).update({
              id: docRef.id
            });
            this.setId(docRef.id);
          });
      }

      getEvents(): Observable<Event[]> {
        return this.collection$;
      }

      getEvent(id: string): Observable<Event> {
        // return a document as a type
        this.document = this.collection.doc(id);
        this.document$ = this.document.valueChanges();
        return this.document$;
      }

      setId(id: string) {
        this.id = id;
      }

      getId() {
        return this.id;
      }
    }

homepage.component.ts

// Angular Imports
import { Component, OnInit } from "@angular/core";

// Internal Imports
import { AuthService } from "../../auth/auth.service";
import { NavbarComponent } from "../../components/navbar/navbar.component";
import { EventCardComponent } from "../../components/event-card/event-card.component";
import { Event } from "../../event/event";
import { EventsService } from "../../event/events.service";

// AngularFire imports
import { AngularFirestore } from "angularfire2/firestore";

// rxjs imports
import { Observable } from "rxjs";

// firebase
import * as firebase from "firebase";

@Component({
  selector: "app-homepage",
  templateUrl: "./homepage.component.html",
  styleUrls: ["./homepage.component.css"]
})
export class HomepageComponent implements OnInit {
  constructor(
    private authService: AuthService,
    private eventsService: EventsService,
    private afs: AngularFirestore // public navbar: NavbarComponent
  ) {}

  events: Event[] = [];
  myEvents: Event[] = [];

  eventsFilled: boolean;

  getEvents(): void {
    this.eventsService.getEvents().subscribe(events => {
      this.events = events;
      console.log("the length of the events pulled are: " + this.events.length);
    });
  }

  ngOnInit() {
    this.getEvents();
    console.log(
      "the length of the events logged from onInit are: " + this.events.length
    );
  }
}

Answer 1

您指的是组件中的局部变量吗？

如果是这样，当您离开某个组件时，该组件将被销毁。它在任何属性(局部变量)中的任何状态都消失了。您不能在路由之间的组件中保留状态。

相反，您可以将该状态存储在服务中。如果您使用根应用程序注入(inject)器注册服务，那么即使组件被销毁，该服务也会保留。