角度2 - 観測可能で非同期のHTTPローディング

Question

最近、私はangular2に苦労しています。現在、非同期HTTPローディングに関連するいくつかの問題に取り組んでいます。ここで

は、私が得たものである：プロパティが取得されたデータで埋めなければならないことのREST API

1クラス（データプロバイダ）へのHTTP呼び出しを実行するためのメソッドを含む

• 1サービス・コンポーネント（MyCustomHttpService）ビューにデータをプッシュするためにクラスのゲッターを呼び出し
• 1ビューコンポーネント（MyCmp）Iは、Tを希望何

O操作を行います。私は"DataProvider.getDataProviderSpecification（）"

• を呼び出すと

  は、私はそれはそれ以外の場合はまだ

• ロードされていない場合、私はデータを返すすでに

をロードされたデータをロードします

このロジックは、DataProviderクラスにある必要があり、カスタムhttpサービスまたはビューコンポーネントではありません。

本当に汚い回避策が見つかりました。私はそれが本当に悪いことを知っているので、私はそのコードを改善する方法についてアドバイスを求めています。

ご協力いただきありがとうございます。

は

それはそのように見えます（コードは掃除）：

/** CLASS **/ 
@Component() 
export class DataProvider { 
    private treestructure: any = null; 

    constructor(private httpService: MyCustomHttpService) {} 

    public getDataProviderSpecification() { 
     if(this.treestructure == null) { 
      return Observable.create(observer => { 
      // http service to get REST data 
      this.httpService.getDocumentDataProviderTree(this.documentID) 
        .subscribe((tree)=> { 
         this.treestructure= tree; 
         observer.next(this.treestructure); 
         observer.complete(); 
        }); 
      }); 
     } else { 
      return Observable.create(observer => { 
       observer.next(this.treestructure); 
       observer.complete(); 
      }); 
     } 
    } 
... 
} 


/** VIEW COMPONENT **/ 
@Component({ 
    selector: 'my-cmp', 
    template: '<tree-cmp [structure]="tree"></tree-cmp>', 
    inputs: ['dataprovider'], 
    directives: [TreeComponent] 
}) 
export class MyCmp { 
    @Input() dataprovider: DataProvider; 
    tree: any; 
    showDetails(id) { 
     this.dataprovider.getDataProviderSpecification().subscribe((treestructure) => { 
      this.tree = treestructure; 
     }); 
    } 
} 

Answer 1

これは、あなたが欲しいものを行う必要があります。

public getDataProviderSpecification() { 
    if(this.treestructure) { 
     return Observable.of(this.treestructure); 
    else if(this.observable) { 
     // if `this.observable` is set then the request is in progress 
     // return the `Observable` for the ongoing request 
     return this.observable; 
    } else { 
     // create the request, store the `Observable` for subsequent subscribers 
     this.observable = this.httpService.getDocumentDataProviderTree(this.documentID) 
      //.map(res => res.json()) 
      .do(val => { 
      this.treestructure = val; 
      // when the cached data is available we don't need the `Observable` reference anymore 
      this.observable = null; 
      }) 
      // make it shared so more than one subscriber can get the result 
      .share(); 
     return this.observable; 
    } 
}  

も参照してくださいhttps://stackoverflow.com/a/36291681/217408