angular - 使用持久数据的正确方法
问题描述
我items
只尝试从数据库中获取一次(我不希望它们改变)。当我最初加载home-page.component.tsHomePageComponent.items
时,如果我导航离开HomePageComponent
到ProfilePageComponent
然后返回到,HomePageComponent
因为itemsService.items$
已经解决了订阅回调不会重新运行并且不会重新初始化,所以会正确设置HomePageComponent.items
。这是我正在使用的当前解决方法,但感觉太笨拙,无法正确处理这种情况。
主页.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
. 服务本身可以使用 缓存调用结果tap
。
主页.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 的接口,以便我可以强输入调用和签名。您可以将其替换为您需要的任何接口类型。
推荐阅读
- xaml - 在条目 xamarin.forms 的焦点和非焦点上设置动画标签
- strapi - 尝试在 Strapi CMS 的 Quill 编辑器插件中使用 peaks.js。得到:ReferenceError:导航器未定义
- java - 在 java 中查询 AWS lambda 函数
- react-native - 如何以编程方式打开/关闭 react-native-calendars 的 ExpandableCalendar?
- android - 如何在 Play 商店中为 Android 产品包实现应用内更新
- javascript - 如何居中对齐?
- flutter - 如何创建混合路线,如(行人和汽车)?
- python - Plotly scatter3d aspectmode 在轴上不一致
- javascript - Safari 录制的 Angular 8 中的视频加速问题
- python - 如何在 slack api 的事件中触发 Modal?