时间戳

首页 > 解决方案 > angularfire2 - 当我离开时如何保留数据

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

问题描述

刷新时填充项目列表。但是，当我导航到另一个页面并返回时，项目列表为空。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;
    });
  }
}

项目服务.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]

标签： angularangularfire2

解决方案

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

这里有几个可能的修复；当组件被拆除时取消订阅，使用takeUntil/和标记，或者在您的服务中放置/ 。takeWhilereplay(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;
  }
}

推荐阅读