Angular 4 条路由在每次加载组件时调用 ngOnInit 重复 API 调用

Question

我有一个小的网络应用程序，它基本上列出了一个播放器列表，当用户点击播放器名称时，它会显示播放器详细信息。它使用两个 api 调用，一个用于列表，另一个用于加载所选玩家的详细信息。我的问题是，当我从 details 路由返回到 home 路由时，组件再次执行 ngOnInit 因此它再次进行第一个 api 调用以再次加载 home 列表，我不想再次调用此调用。这是我的配置：

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

首页-resolver.service.ts

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

Answer 1

您应该使用 服务。调用 api 一次并将其保存在变量中，比方说服务中的 playerListData 。现在，当您返回列表路由时，检查该服务中的数据是否为空。假设它不为空，您不调用 api 并直接使用 playerListData。如果它为 null，那么您可能是第一次访问列表路由。在这种情况下调用 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 routes are calling ngOnInit every time component is loaded repeating API call" 这就是 angular 处理其组件的方式。 我不明白将 API 响应保存在变量中并在重新访问后重用它有什么意义，我认为如果你这样做，下次你可能会错过该播放器列表中的新更新。