5

私が達成しようとしているのは、アプリの初期化ごとに 1 回だけ外部 API を呼び出すことです。

簡単なサービスがありますが、

@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());
    }
}

そして2つのコンポーネント、メイン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}
        );
    }
}

およびルートで使用される別のコンポーネント

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

export class SecondComponent {

    constructor(private _service: XService){

    }
}

サービスが初期化され、Angular は の初期化時にサーバーにヒットしますAppComponent。からサービスを再度呼び出そうとするたびにXService、( 経由で) Angular が外部 API にヒットします。外部からのヒットを最小限に抑えたい。SecondComponentSecondComponent_service._service.callAnAPI()

AppComponentでサービスを再度呼び出すよりも、初期化で作成されたデータを取得するにはどうすればよいですかSecondComponent

4

2 に答える 2

4

これに演算子を使用してdo、最初にデータを取得し、次の呼び出しでそれらを再利用できます。

@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;
        });
    }
  }
}

callAnAPIスタートアップとしてデータをロードする場合は、サービス コンストラクターからメソッドを呼び出すことができます。

このアプローチを使用できるようにするには、アプリケーションのブートストラップ時にサービスを定義する必要があります。

bootstrap(AppComponent, [ XService ]);

このようにして、アプリケーション全体に対して単一のインスタンスを使用します。

于 2016-03-18T11:26:06.403 に答える
2 
@Injectable()
export class XService {
    url = "http://api.example.com"
    constructor(private _http:Http) {

    }

    callAnAPI(){
      if(this.data) {
        return Observable.of(this.data);
      } else {
        console.log('made an external request");
        return this._http.get(url)
            .map(res=>res.json())
            .do(res => this.data = res);
      }
    }
}
于 2016-03-18T11:25:46.383 に答える