每次加载组件并重复API调用时，Angular 4路由都会调用ngOnInit [英] Angular 4 routes are calling ngOnInit every time component is loaded repeating API call

问题描述

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

I have a little webapp that basically lists a player list and when user clicks on the player name, it shows player details. It uses two api calls, one for list and other to load details of selected player. My problem is that when i go back from details route to home route the component executes ngOnInit again so it makes again the first api call to load the home list again, and i don't want this call again. This is my configuration:

routing.module.ts

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

detail.component.ts

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

home.component.ts

home.component.ts

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

detail-resolver.service.ts

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

home-resolver.service.ts

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

推荐答案

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

You should make use of services. Call the api once and save it in variable let's say playerListData in a service. Now when you go back to list route, check if the data in that service is null or not. Let's say it's not null, you don't call the api and use playerListData directly. If it's null, then you are probably visiting the list route for the first time. In that case call the API. This way your api will be called only once when data is null in the service.

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

I am providing a loose implementation of how it will be.

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

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

Inside the service, you will have code something like,

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

这篇关于每次加载组件并重复API调用时，Angular 4路由都会调用ngOnInit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！