angularfire2 -如何在导航离开时保留数据
angularfire2 -如何在导航离开时保留数据
提问于 2018-06-07 05:35:31
项目列表在刷新时填充。但是，当我导航到另一个页面并导航回来时，项目列表是空的。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]回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 06:43:44
这是因为当您离开页面时，您没有取消订阅，可观察项仍然是热的，并且只会发出更改。
这里有几个可能的修复；要么取消订阅，当组件被拆除时使用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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50729959
复制相关文章
相似问题