Angular 4路线每次加载组件重复API调用时都会调用Ngoninit

Question

我有一个小的WebApp，基本上列出了播放器列表，当用户单击播放器名称时，它显示了播放器详细信息。它使用两个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'];
...
}

详细信息 - 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。这样，当数据中的数据无效时，只有一次将API调用一次。

我正在提供宽松的实现。

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

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

this.playerListData = null;
callTheAPI(){
 code to call the api and get the data.
 this.playerListData = dataFromAPI;
}

Answer 2

" Angular 4路线每次加载组件重复API调用时都会调用Ngoninit，这是Angular在其组件上工作的方式。我不明白将API响应保存在变量中并在重新访问后重复使用它是什么意义>