角度传输状态不会阻止重复的 http 调用

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

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

getAlbum(albumId: number) {

    this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY, null as any);

    if (!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');

而且我还申报了财产

albumNames: any;

我假设我已经完成了所有导入，我有代码画廊组件中的 github https://github.com/Feroli/bachadiff/blob/master/src/app/gallery/gallery.component.ts.

您的做法是正确的，如果您在服务器或浏览器端仅执行一次查询而不是两次，则只需以不同的方式处理您的服务即可。

伪逻辑：

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

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

@Injectable()
export class FacebookEventsService {
    const ALBUM_PHOTOS_KEY: StateKey<number>;

    constructor(@Inject(PLATFORM_ID) private platformId: Object, private http: HttpClient) {
       this.ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');
    } 

    getBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
        // Here we check if server or browser side
        if (isPlatformServer(this.platformId)) {
            return this.getServerBachaDiffFacebookEvents();
        } else {
            return this.getBrowserBachaDiffFacebookEvents();
        }
    }

    getServerBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {

           return this.http.get(this.facebookEventsUrl)
             .map(res => {

                  // Here save also result in transfer-state
                  this.transferState.set(ALBUM_PHOTOS_KEY, calendarEvents);

             });
     }


        getBrowserBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
           return new Observable(observer => {
            observer.next(this.transferState.get(ALBUM_PHOTOS_KEY, null));
          });
     }
}

UPDATE

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

1. TransferHttpCacheModule（在 app.module.ts 中初始化）。

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

https://github.com/angular/universal/tree/master/modules/common https://github.com/angular/universal/tree/master/modules/common

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

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

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

UPDATE 2

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

getAlbum(albumId: number) {

    if (isPlatformServer(this.platformId)) {

      if (!this.albumPhotos) {
        this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
          this.bachataPicsArray = res;
          this.state.set(ALBUM_PHOTOS_KEY, null);
        });
      }
    } else {

      this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY,null);
    }

  }

UPDATE 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<Object> {

    this.albumId = albumId;
    this.facebookAlbumPhotosUrl =    `https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token=${this.accessToken}`;

    return    Observable.fromPromise(this.getPromiseBachaDiffAlbumPhotos(albumId));
  }

private getPromiseBachaDiffAlbumPhotos(albumId: number): Promise<{}> {
    return new Promise((resolve, reject) => {
      this.facebookAlbumPhotosUrl = `https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token=${this.accessToken}`;

      let facebookPhotos: FacebookPhoto[] = new Array();
      let facebookPhoto: FacebookPhoto;

      const params: HttpParams = new HttpParams();
      this.http.get(this.facebookAlbumPhotosUrl, {params: params})
        .subscribe(res => {

          let facebookPhotoData = res['data'];

          for (let photo of facebookPhotoData) {

            facebookPhotos.push(
              facebookPhoto = {
                id: photo.id,
                image: photo.images[3].source,
                link: photo.link,
                height: photo.height,
                width: photo.width
              });
          }

          resolve(facebookPhotos);
        }, (error) => {
          reject(error);
        });
    });
  }

UPDATE 4

ngOnInit 在服务器端执行，这意味着我在这里的第一个答案必须在这种情况下使用。

此外，还要注意，在服务器端您无权访问该窗口，因此调用$

With gallery.component.ts你可以做这样的事情来只运行一次http查询，但这并不能解决你所有的问题，我认为它仍然需要进一步的改进。

ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      this.facebookService.getBachadiffFacebookVideos().subscribe(res => {
        this.bachataVidsArray = res;
        this.state.set(VIDEOS_KEY, res as any);
      });


  this.facebookService.getBachadiffFacebookLastClassPictures().subscribe(res => {
        this.bachataPicsArray = res;
        this.state.set(LAST_CLASS_PICTURES_KEY, res as any);
      });

      this.facebookService.getBachadiffAlbumNames().subscribe(res => {
        this.bachataAlbumHeaderNames = res;
        this.state.set(ALBUM_NAMES_KEY, res as any);
      });
    } else {
      $('ul.tabs').tabs();

      this.bachataVidsArray = this.state.get(VIDEOS_KEY, null as any);
      this.bachataPicsArray = this.state.get(LAST_CLASS_PICTURES_KEY, null as any);
      this.bachataAlbumHeaderNames = this.state.get(ALBUM_NAMES_KEY, null as any);
    }
  }