Angular Transfer State 不会阻止重复的 http 调用 [英] Angular Transfer State not preventing repeat http calls

问题描述

我有一个 http 请求，它被注入到我的组件中并从那里订阅.由于我在我的应用程序中引入了具有 angular 通用的服务器端渲染，因此页面上的结果至少重复了两次.

我有一个在点击时调用的方法，它执行对 facebook api 的 http 请求

getAlbum(albumId: number) {this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY, null as any);如果(！this.albumPhotos){this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {this.bachataPicsArray = res;this.state.set(ALBUM_PHOTOS_KEY, res as any);});}}

我在导入下面声明了 const 变量

const ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');

我也声明了财产

专辑名称:任意；

我假设我已经完成了所有的导入，我在

解决方案

你说得对，如果你在服务器端或浏览器端只执行一次查询，你只需要以不同的方式处理你的服务两次.

伪逻辑:

• 如果服务器 -> 执行 http 请求 -> 在传输状态中设置值
• 如果浏览器 -> 从传输状态获取值

为此，您可以例如增强您的服务，如下所示:

@Injectable()导出类 FacebookEventsService {const ALBUM_PHOTOS_KEY: StateKey;构造函数(@Inject(PLATFORM_ID)私有平台ID:对象，私有http:HttpClient){this.ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');}getBachaDiffFacebookEvents(): Observable{//这里我们检查是服务器端还是浏览器端如果(isPlatformServer(this.platformId)){返回 this.getServerBachaDiffFacebookEvents();} 别的 {返回 this.getBrowserBachaDiffFacebookEvents();}}getServerBachaDiffFacebookEvents(): Observable{返回 this.http.get(this.facebookEventsUrl).map(res => {//这里保存也导致转移状态this.transferState.set(ALBUM_PHOTOS_KEY, calendarEvents);});}getBrowserBachaDiffFacebookEvents(): Observable{返回新的 Observable(观察者 => {观察者.next(this.transferState.get(ALBUM_PHOTOS_KEY, null));});}}

更新

要使用此逻辑，您还需要:

1. TransferHttpCacheModule(在 app.module.ts 中初始化).

<块引用>

TransferHttpCacheModule 安装一个 Http 拦截器，避免客户端上的重复 HttpClient 请求，用于请求在服务器端渲染应用程序时已经完成.

https://github.com/angular/universal/tree/master/模块/通用

2. ServerTransferStateModule 在服务器端和 BrowserTransferStateModule 在客户端使用 TransferState

https://angular.io/api/platform-b​​rowser/TransferState

P.S.:请注意，如果您这样做并增强您的服务器，当然您将不再需要在上面显示的 getAlbum() 方法中设置 transfer-state 中的值

更新 2

如果您想像在 gallery.component.ts 中那样处理服务器端和浏览器端，您可以执行以下操作:

getAlbum(albumId: number) {如果(isPlatformServer(this.platformId)){如果(！this.albumPhotos){this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {this.bachataPicsArray = res;this.state.set(ALBUM_PHOTOS_KEY, null);});}} 别的 {this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY,null);}}

更新 3

问题是，您的操作 getAlbum 永远不会在服务器端调用.此操作仅在浏览器端使用，一旦页面呈现，当用户单击特定操作时.因此，在这种特定情况下使用转移状态是不正确/不需要的.

此外不确定您服务中的 Observable 是否已正确订阅.

这里要改变什么才能让它运行:

gallery.component.ts

getAlbum(albumId: number) {this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {this.albumPhotos = res;});}

facebook-events.service.ts

getBachadiffAlbumPhotos(albumId: number): Observable