angular - 将数据存储在服务 Angular 2 中是一种很好的做法

Question

在很多教程中，一些数据(例如待办事项列表)存储在服务中。这是好的做法吗？我是 Angular 2 的新手，我想学习如何编写正确的代码。

一些代码示例:

@Injectable()
export class JsonRestService {

    jsonObject = {};
    jsonContent = {};

    constructor(private http:Http) {
        this.getXmlInJson()
        .subscribe(
            data => this.startGeneratingHtmlTemplateProcess(data),
            error => console.log(error + " - Błąd pobrania jsona")
        );
    }

    getXmlInJson() {
        let url = "http://localhost:8080/xml";
        return this.http.get(url);
    }

    public convertRestJsonToObject$() {
        this.getXmlInJson()
        .subscribe(
            data =>  this.startGeneratingHtmlTemplateProcess(data.json),
            error => console.log(error + " - Błąd pobrania jsona")
        );
   }

   private startGeneratingHtmlTemplateProcess(data) {
        this.jsonObject = JSON.parse(JSON.parse(JSON.stringify(data))._body);
        this.jsonContent = JSON.parse(JSON.stringify(data._body));
        console.log(this.jsonObject);
        console.log("Json:");
        console.log(this.jsonContent);
   }

   showObjectInConsole() {
       console.log("Wyzwolone prze przycisk: ");
       console.log(this.jsonObject);
   }

}

Answer 1

虽然服务通常用于通过与数据源交互来检索/更新数据，但它们在存储数据方面也非常方便。例如，如果你需要检索一大段数据，你可以在服务中缓存它:

@Injectable()
export class DataService{

    mydata: Array<string>[];

    constructor(private http:Http){}

    loadData(): Observable<string[]> {
        if (this.mydata){
            return Observable.from(this.mydata);  // return from cache
        } else
        {
            return this.http.get("./assets/LargeDataSet.json")
                .map(res => res.json())
                .do(data => this.mydata = data);
        }
    }
} 

在此示例中，大型数据集的检索将在第一次调用 loadData() 时发生，而后续调用将快速返回数据，而无需耗时的 http.get()。由于服务可以是单例，因此许多组件可以利用服务中缓存的数据。 您还可以将应用状态存储在单例服务中。