Question

在Angular2示例ToH中，主组件通过Web API检索数据。 hero.service返回一个observable。

详细信息组件还通过id通过Web API检索数据。

我将observable视为不可变的客户端存储。如果我更新详细信息组件中的英雄，我会先将更改推送到observable，然后当用户点击保存按钮时，我会将更新的observable（发送到json）发布到api服务器。

我认为好处是减少IO流量并保持主节点和细节同步（我更新了细节，它会自动反映在主节点中）。

hero.service.ts

import {Injectable} from 'angular2/core';
import {Http, Response, Headers, RequestOptions} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';

import {Hero} from './hero';

@Injectable()
export class HeroService {
  private _heroesUrl = 'http://localhost:8081/api/hero/';  // URL to web api
  private _cachedHeroes;

  constructor (private http: Http) {}      

  getHeroes (): Observable<Hero[]> {
      if (!this._cachedHeroes) {
          this._cachedHeroes = this.http.get(this._heroesUrl+"readAll")
                                        .map(this.extractData)
                                        .catch(this.handleError);
       }
       return this._cachedHeroes.share();
  }

  getHero (_id: number): Observable<Hero> {
    return this.http.get(this._heroesUrl+"read/"+_id.toString())
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  addHero (name: string): Observable<Hero>  {
    let body = JSON.stringify({ name });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this._heroesUrl, body, options)
                    .map(this.extractData)
                    .catch(this.handleError);
  }


  private extractData(res: Response) {
    if (res.status < 200 || res.status >= 300) {
      throw new Error('Bad response status: ' + res.status);
    }
    let body = res.json();
    console.log(body.data);
    return body || { };
  }


  private handleError (error: any) {
    let errMsg = error.message || 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

在上面我将主数据缓存到_cachedHeroes中作为observable。所以我的问题是那个

让master和detail组件共享相同的可观察数据是个好主意吗？
如果是，请在getHero（_id：number）中：Observable＆lt; Hero＆gt;而不是进行api调用，如何通过id从_cachedHeroes中获取详细信息对象？
在更新详细信息或添加新的详细信息对象后，如何将更新的/新的详细信息放回_cachedHeroes？
当我想保存如何知道_cachedHeroes中哪些对象应该发送到数据库？

针对此类问题的任何推荐/最佳做法？

更新

0 个答案: