Angular 2 调用服务仅在应用程序初始化时 [英] Angular 2 call service only on app initialization

问题描述

我想要完成的是每次应用初始化只调用一次外部 API.

我有一个简单的服务，

@Injectable()导出类 XService {url = "http://api.example.com"构造函数(私有_http:Http){}callAnAPI(){console.log('提出了一个外部请求");返回 this._http.get(url).map(res=>res.json());}}

和两个组件，主要的appComponent

@Component({选择器:'我的应用'，模板:`<div>测试

`})导出类 AppComponent {isLoading = true;结果 = [];构造函数(私有_service:XService){}ngOnInit(){Observable.forkJoin(this._service.callAnAPI()//这里还有一些服务).订阅(资源=>{this.results = res[0];},空值，() =>{this.isLoading = false});}}

和另一个与路由一起使用的组件

@Component({模板:`<div>我想将服务与此组件一起使用.

`})导出类 SecondComponent {构造函数(私有_service:XService){}}

服务被初始化，Angular 在 AppComponent 的初始化上命中服务器.我也想将 XService 与 SecondComponent 一起使用，每当我尝试从 SecondComponent 再次调用该服务时(通过 _service._service.callAnAPI()) Angular 命中外部 API.我想尽量减少外部点击.

如何在初始化时获取 AppComponent 生成的数据，而不是在 SecondComponent

中再次调用服务

解决方案

您可以使用 do 运算符来第一次获取数据并在下次调用时重复使用它们:

@Injectable()导出类 XService {url = "http://api.example.com"构造函数(私有_http:Http){}callAnAPI(){console.log('提出了一个外部请求");如果(this.cachedData){返回 Observable.of(this.cachedData);} 别的 {返回 this._http.get(url).map(res=>res.json()).do((数据) => {this.cachedData = 数据；});}}}

如果你想在启动时加载数据，你可以从服务构造函数中调用callAnAPI方法.

为了能够使用这种方法，您需要在引导应用程序时定义您的服务:

bootstrap(AppComponent, [ XService ]);

通过这种方式，您将为整个应用程序使用单个实例.

What I am trying to accomplish is to call external API only once per app initialization.

I have a simple service,

@Injectable()
export class XService {
    url = "http://api.example.com"
    constructor(private _http:Http) {

    }

    callAnAPI(){
        console.log('made an external request");
        return this._http.get(url)
            .map(res=>res.json());
    }
}

and two components, the main appComponent

@Component({
  selector: 'my-app',
  template: `
    <div>
      Test
    </div>
  `
})

export class AppComponent {
    isLoading = true;
    results = [];

    constructor(private _service: XService){

    }

    ngOnInit(){
        Observable.forkJoin(
            this._service.callAnAPI()
            // some more services here
        )
        .subscribe(
            res => {
                this.results = res[0];
            },
            null,
            () => {this.isLoading = false}
        );
    }
}

and another component used with a route

@Component({
  template: `
    <div>
      I want to use the service with this component.
    </div>
  `
})

export class SecondComponent {

    constructor(private _service: XService){

    }
}

the service is initialized and Angular hits server on the initialization of the AppComponent. I want to Use XService with SecondComponent too, whenever I try to call the service again from the SecondComponent, (via _service._service.callAnAPI()) Angular hits the external API. I want to minimize the external hits.

How do I obtain the data made by the AppComponent on initialization than calling again the service again in SecondComponent

解决方案

You could use the do operator for this to get the data the first time and reuse them for next calls:

@Injectable()
export class XService {
  url = "http://api.example.com"
  constructor(private _http:Http) {

  }

  callAnAPI(){
    console.log('made an external request");
    if (this.cachedData) {
      return Observable.of(this.cachedData);
    } else {
      return this._http.get(url)
        .map(res=>res.json())
        .do((data) => {
          this.cachedData = data;
        });
    }
  }
}

If you want to load data as startup, you can call the callAnAPI method from the service constructor.

To be able to use this approach, you need to define your service when bootstrapping your application:

bootstrap(AppComponent, [ XService ]);

This way you will use a single instance for your whole application.

这篇关于Angular 2 调用服务仅在应用程序初始化时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！