每次加载组件时，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

您应该使用服务。调用一次 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 路由都会调用 ngOnInit，重复 API 调用”这就是 Angular 处理其组件的方式。 我不明白将 API 响应保存在变量中并在重新访问后重用它有什么意义，我认为如果您下次这样做，您可能会错过该播放器列表中的新更新。