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调用将被缓存，并且不会在浏览器上重新构建。

通用角度显示页面两次

1 个答案: