Angular 4 маршрута вызывают ngOnInit каждый раз, когда загружается компонент, повторяя вызов API

Question

У меня есть небольшое веб-приложение, которое в основном перечисляет список игроков, и когда пользователь нажимает на имя игрока, он показывает информацию об игроке.Он использует два вызова 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

«Angular 4 маршрута вызывают ngOnInit каждый раз, когда компонент загружается, повторяя вызов API». Так работает angular на его компонентах.Я не понимаю, в чем смысл сохранять ответ API в переменной и повторно использовать его после повторного посещения, я думаю, что в следующий раз вы могли бы пропустить новые обновления в этом списке игроков, если вы это сделаете.

Answer 2

Вам следует воспользоваться услугами .Вызовите API один раз и сохраните его в переменной, скажем, playerListData в сервисе.Теперь, когда вы вернетесь к списку маршрутов, проверьте, являются ли данные в этом сервисе нулевыми или нет.Допустим, он не нулевой, вы не вызываете 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;
}