Angular 4 routes are calling ngOnInit every time component is loaded repeating API call

问题

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

...
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();
  }

回答1:

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;
}

回答2:

"Angular 4 routes are calling ngOnInit every time component is loaded repeating API call" This is the way how angular working on its components. I don't understand what is the point of saving API response in a variable and reuse it after a revisit, I think you could miss the new updates in that player list next time if you are doing it.

来源：https://stackoverflow.com/questions/54916886/angular-4-routes-are-calling-ngoninit-every-time-component-is-loaded-repeating-a

标签

angular

routing

resolver