Angular 使用 universal 渲染页面两次

Question

我正在使用通用的 angular，但是页面加载了两次，第一次没有 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));
  }

Answer 1

根据您使用的版本，有不同的方法来使用 TransferState API。一旦你达到 Angular 7，就变得很容易了。

在 AppModule 中像这样导入 BrowserModule：

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

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

Angular 使用 universal 渲染页面两次

Angular with universal renders the page twice

angular-universal

angular