angularfire2

Question

项目列表在刷新时填充。但是，当我导航到另一个页面并返回时，项目列表是空的。 getItems 被调用，但订阅没有发生。

这是一个非常简单的例子。我做错了什么？

item.component.ts

import { Component, OnInit } from '@angular/core';

import { ItemService } from './item.service';
import { Item } from './item';

@Component({
  selector: 'app-items',
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css']
})
export class ItemsComponent implements OnInit {
  items: Item[];

  constructor(private itemService: ItemService) {}

  ngOnInit() {
    this.itemService.getItems().subscribe(items => {
      this.items = items;
    });
  }
}

item.service.ts

import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

import { Item } from './item';

@Injectable({providedIn: 'root'})
export class ItemService {
  items: Observable<Item[]>;

  constructor(private afs: AngularFirestore) {
    this.items = this.afs.collection<Item>('items').valueChanges();
  }

  getItems() {
    return this.items;
  }
}

app.module.ts

  providers: [ItemService],
  bootstrap: [AppComponent]

Answer 1

这是因为当您离开页面时您没有取消订阅，Observable 仍然很热并且只会发出更改。

这里有几个可能的修复；取消订阅，使用 takeUntil / takeWhile 并在组件被拆除时进行标记，或者在您的服务中放置 replay(1) / shareReplay(1) 。

您选择哪一个取决于项目集合的大小、更改的频率以及您将来打算如何使用该服务。

import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
import { Injectable } from '@angular/core';

import { Item } from './item';

@Injectable({providedIn: 'root'})
export class ItemService {
  items: Observable<Item[]>;

  constructor(private afs: AngularFirestore) {
    this.items = this.afs.collection<Item>('items')
      .valueChanges()
      .pipe(shareReplay(1));
  }

  getItems() {
    return this.items;
  }
}

angularfire2 - 当我离开时如何保存数据

angularfire2 - How to keep data when I navigate away

angular