我试图只从数据库中获取items
一次(我不指望它们会改变)。当我最初加载home-page.component.ts时HomePageComponent.items
被正确设置但是如果我从HomePageComponent
导航到ProfilePageComponent
然后回到HomePageComponent
因为itemsService.items$
已经解决了订阅回调没有重新运行而且HomePageComponent.items
没有重新初始化。这是我正在使用的当前解决方法,但是处理这种情况的正确方法感觉太笨重了。
家庭page.component.ts
ngOnInit() {
this.itemsService.items$.subscribe((items:item) => {
// Is only called once after items are initalially fetched over http
this.items = items;
this.itemsService.addItems(items);
});
if(this.itemsService.foundItems){
this.items= this.itemsService.items;
}
}
items.service.ts
export class ItemsService {
private items = new BehaviorSubject(null);
items$ = this.items.asObservable();
foundItems = null;
constructor(private httpClient: HttpClient){
this.items.next(httpClient.post<any>(myUrl,myQuery).subscribe(this.items));
}
addItems(items){
this.foundItems = items;
}
}
组件不应该知道任何缓存,您需要抽象它。该服务可以缓存检索到的项目,然后使用of
将项目返回到包含在observable中的任何后续调用。服务本身可以使用tap
缓存调用的结果。
家庭page.component.ts
ngOnInit() {
this.itemsService.getItems().subscribe((items) => {
this.items = items;
});
}
items.service.ts
import { map, tap } from 'rxjs/operators';
import { of } from 'rxjs';
export interface IItem {
}
export class ItemsService {
items: IItem[];
constructor(private httpClient: HttpClient){
}
getItems() : Observable<IItem[]> {
return this.items
? of(this.items)
: this.httpClient.get<IItem[]>(myUrl).pipe(tap((data) => this.items = data));
}
}
出于示例的目的,我添加了一个名为IItem的接口,因此我可以强烈地键入调用和签名。您可以使用您需要的任何接口类型替换它。
取消订阅您的观察者破坏主页组件。
itemOb: any;
把它当作全球性的
ngOnInit() {
this.itemOb = this.itemsService.items$.subscribe((items:item) => {
// Is only called once after items are initalially fetched over http
this.items = items;
this.itemsService.addItems(items);
});
if(this.itemsService.foundItems){
this.items= this.itemsService.items;
}
}
ngOnDestroy() {
if (this.itemOb) {
this.itemOb.unsubscribe(); }
}
试试这个你的问题可以解决