Question

HomeComponent

ngOnInit()
{
    console.log('loaded');
    this.retrieveData();
}

retrieveData()
{
    // this.dataService.getData().subscribe(...);
}

我在组件加载时检索数据。当用户点击另一个routerLink，例如SettingsComponent并返回HomeComponent时，会再次调用该函数，因为该组件已再次加载。但是每当我返回到组件时，它再次进行函数调用，这会产生太多不需要的HTTP请求。我需要防止这种情况，并确保仅在第一次调用该函数。我该怎么做呢？我应该使用其他组件生命周期钩子吗？

Answer 1

好的，我发现你正在使用service加载数据，这是一个很好的方法。

然后，您可以简单地在某处缓存数据，当您返回组件时，请检查此数据的缓存。我认为您可以将数据直接存储在您的服务中，并将其保存在内存中，或者您可以将其放入localStorage

所以第一个选项看起来像：

<强> data.service.ts

export class DataService {

    private data: any[];

    setData(data:any[]){
        this.data = data;
    } 

    getData(){
        return this.data || [];
    }

    hasData(){
        return this.data && this.data.length;    
    }  

    getData(){
        // your implementation here 
    }
}

然后在 HomeComponent

内

retrieveData(){
    if(this.dataService.hasData()){
         // this will get the data which was previously stored in the memory
         // and there will be no HTTP request
         let data = this.dataService.getData();
         // do something with data now ...
    }else{
        // old code 
        this.dataService.getData().subscribe(response => {
            // but this time safe the data for future use
            this.dataService.setData(response.data);   
        }, error => {
            // handle errors
        });
    }
}

重要：如果使用此方法，您应该在 app.module.ts - ＆gt;中声明服务时将其设为全局服务的提供商

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [ DataService <---------- SEE HERE ], bootstrap: [AppComponent] }) export class AppModule { }

然后不这样做：

@Component({ selector: 'home', templateUrl: '...', styleUrls: ['...'], providers: [ DataService <---- THEN DON'T put in component's providers ] }) export class HomeComponent{ ... }

<强> ============================================ =

localStorage方法

<强> HomeComponenet

retrieveData() { let data = localStorage.getItem('yourDataName'); if (data === null){ // old code this.dataService.getData().subscribe(response => { // but this time safe the data for future use in localStorage localStorage.setItem('yourDataName', response.data); }, error => { // handle errors }); } else { // seems that you already loaded this data // do something with this data ... } }

这两种方法都有一个限制，即您无法处理大量数据，当然如果您不想破坏使用您应用的用户的浏览器：）

如何在ngOnInit（）上运行一次函数，而不是从另一个routerLink返回时再次运行？

1 个答案: