具有通用性的 Angular 将页面呈现两次答案

【问题标题】：Angular with universal renders the page twice具有通用性的 Angular 将页面呈现两次
【发布时间】：2019-10-02 16:18:07
【问题描述】：

我使用 angular 和 Universal，但是页面加载了两次，第一个没有 api 数据，第二个已经加载了它们

有人知道如何解决这个问题吗？

这是我向我的 API 发出请求的方式

getPagination(event, red=false) {
        if(red){
            this.router.navigate(['/eventos/'+event]);
        }else{
            this.events = new Array();
            this.loading = true;
            this.p=event;
            //if (this.events.length < this.totalEvents) {
                const filter = "ordering=startDate&items=" + this.pageSize + "&page=" + event;
                let urlfilter = '';

                for (let filter in this.filters) {
                    if(this.filters[filter] != ''){
                        urlfilter += '&'+filter+'='+this.filters[filter];
                    }
                }
                this.api.getEvents(filter + urlfilter).subscribe(res =>{
                    this.totalEvents = res['count'];
                    this.events = res['results'];
                    this.loading = false;
                }, err=>{
                    this.loading = false;
                })
            //}
        }
    }

这是我在 API 服务中的方法

 getEvents(where?: string): Observable<any> {
    where = (where) ? '?' + where : '';
    return this.http.get(this.apiUrl + `events/${where}`)
    .pipe(map(res =>  res), catchError(this.handleError));
  }

【问题讨论】：

使用 TransferState api

标签： angular angular-universal

【解决方案1】：

根据您使用的版本，有不同的方法可以使用 TransferState API。一旦你进入 Angular 7，它就会变得非常容易。

在 AppModule 中像这样导入 BrowserModule：

HttpClientModule,
BrowserModule.withServerTransition({ appId: 'your-app-id' }),
BrowserTransferStateModule,

如果我没记错的话，我记得顺序对于 HttpClientModule 可能很重要。然后，当您使用 HttpClient 进行 http 调用时，来自服务器的 api 调用将被缓存，而不是在浏览器上重新生成。

【讨论】：