修改组件中的局部变量会修改Angular 2中的共享服务变量？

这是我的服务：

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import 'rxjs/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class CaseService {

    private data:any;
    private observable: Observable<any>;

    constructor(private _http: Http) {}

    public GetCase() {

         const url = 'http://localhost:55130/api/case?caseId=123';

         if (this.data) {
             //after filtering an array of objects on a local variable
             //in a controller, this.data is now modified
             console.log(this.data);
             return Observable.of(this.data);
         } else if (this.observable) {
            return this.observable;
         } else {
             let headers = new Headers();
            headers.append('Content-Type', 'application/json');
             this.observable = this._http.get(url,{headers:headers})
                 .map(response => {
                    this.observable = null;
                    this.data = response.json();
                    return this.data;
                 }).share();
                 return this.observable;
        }

    }
}

---

为什么当我修改主控制器中的局部变量时，它会修改共享服务中的变量。基本上，我要做的是，当我进入主页时，我过滤掉主页的内容，然后当我访问联系人页面时，我再次从缓存和文件管理器中获取完整对象，过滤掉联系人页面的内容，但是当我进入联系人页面时，CaseContent现在是一个对象，而不是一个对象数组。

您使用的是同一个“data”变量实例。 从方法返回引用类型不会克隆/复制该对象，它只是创建新指针（指向内存中的同一对象）

您可以通过删除内部缓存来解决此问题：

@Injectable()
export class CaseService {

  constructor(private _http: Http) {}

  public GetCase() {

     const url = 'http://localhost:55130/api/case?caseId=123';
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
     return this._http.get(url,{headers:headers})
             .map(response => {
                return response.json();
             });
  }
}

或者，如果您真的想缓存可观察对象和数据，那么您应该在返回时克隆该对象，类似于“return observable.of（DeepClone（this.data））；”

在google中搜索如何在js中深度克隆对象，或实现自定义方法

在您的情况下，最好只缓存字符串json响应，并在每次访问时调用“json.parse（）”

this.data = response.text();
return JSON.parse(this.data);

---

您使用的是“data”变量的同一个实例。 从方法返回引用类型不会克隆/复制该对象，它只是创建新指针（指向内存中的同一对象）

您可以通过删除内部缓存来解决此问题：

@Injectable()
export class CaseService {

  constructor(private _http: Http) {}

  public GetCase() {

     const url = 'http://localhost:55130/api/case?caseId=123';
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
     return this._http.get(url,{headers:headers})
             .map(response => {
                return response.json();
             });
  }
}

或者，如果您真的想缓存可观察对象和数据，那么您应该在返回时克隆该对象，类似于“return observable.of（DeepClone（this.data））；”

在google中搜索如何在js中深度克隆对象，或实现自定义方法

在您的情况下，最好只缓存字符串json响应，并在每次访问时调用“json.parse（）”

this.data = response.text();
return JSON.parse(this.data);