Question

我有一个小的Web应用程序，它基本上列出了播放器列表，并且当用户单击播放器名称时，它会显示播放器详细信息。它使用两个api调用，一个用于列表，另一个用于加载所选播放器的详细信息。我的问题是，当我从详细信息路由返回到本地路由时，该组件再次执行ngOnInit，因此它再次使第一个api调用再次加载了本地列表，并且我不希望再次调用此命令。这是我的配置：

routing.module.ts

...
export const routes: Routes = [
  {
    path: '',
    component: BioStatsComponent,
    resolve: {
      biostats: BiostatsResolverService
    }
  },
  {
    path: 'info',
    children: [
      {
        path: ':id',
        component: InfoComponent,
        resolve: {
          info: PlayersResolverService
        }
      }
    ]
  }
];
...

detail.component.ts

ngOnInit(){
...
this.playersinfo = this.route.snapshot.data['info'];
...
}

home.component.ts

ngOnInit(){
...
this.biostats$ = this.route.snapshot.data['biostats'];
...
}

detail-resolver.service.ts

...
resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot): Observable<any> {
    const id = route.paramMap.get('id');
    return this.playerService.getPlayerCommonInfo(+id).catch((err: any) => of([err]));
  }
...

home-resolver.service.ts

constructor(private playerService: PlayersService) {}
  resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot): Observable<any> {
    return this.playerService.getPlayerBioStats();
  }

Answer 1

您应该使用服务。调用一次api并将其保存在服务中的变量 playerListData 中。现在，当您返回列表路由时，请检查该服务中的数据是否为空。假设它不为null，您不调用api而是直接使用 playerListData 。如果为空，那么您可能是第一次访问列表路线。在这种情况下，请调用API。这样，当服务中的数据为null时，您的api将仅被调用一次。

我提供了一个松散的实现方式。

import os
source_folder = 'E:/idle/'

file_list = os.listdir(source_folder)
exclude_files = ['Response.csv', 'idle.csv']
file_list = [x for x in file_list if x not in exclude_files]
latest_file = max(file_list)
file_list.remove(latest_file)

for file in file_list:
    os.remove(source_folder + file)

在服务内部，您将拥有类似的代码，

ngOnInit() {
 if(this.service.playerListData!=null)
  {
    this.listData = this.service.playerListData;
  }
 else {
    this.listData =  callTheAPI();
}

Answer 2

“每次加载组件时，Angular 4路由都会通过重复API调用来调用ngOnInit”。这就是在组件上使用angular的方式。我不知道将API响应保存在变量中并在重新访问后重新使用它的意义是什么，我认为如果您这样做，您下次可能会错过该播放器列表中的新更新。

每次加载组件并重复API调用时，Angular 4路由都会调用ngOnInit

2 个答案: