在Angular 2中缓存服务HTTP调用

Question

我正在尝试在我的服务中实现HTTP请求的缓存，这是我的代码片段：

//...
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/publishReplay';
//...

@Injectable()
export class FundsService {

    /**
     * @var {String} URL of funds api
     */
    private baseUrl = 'http://budget.vagrant/api/funds';

    /**
     * @var {Array} Cache of last getFunds request
     */
    private funds : Observable<any> = null;

    constructor(
        private http: Http,
        private router : Router,
        private authenticationService: AuthenticationService) {
    }

    /**
     * Fetch all existing comments
     * @param {boolean} useCache Will use the service's cache array when true
     */
    getFunds(useCache : boolean = true) : Observable<Fund[]> {

        // add authorization header with jwt token
        let headers = new Headers({
            'Authorization': 'Bearer ' + this.authenticationService.getToken()
        });
        let options = new RequestOptions({ headers: headers });
console.log("this.funds = ", this.funds) // <-- every time, null
        if (this.funds === null) {
            this.funds = this.http.get(this.baseUrl, options)
                .map((res:Response) => res.json())
                .do(funds => console.log('fetched funds', funds))
                .publishReplay(1)
                .refCount();
        }
console.log("this.funds = ", this.funds) // <-- every time, has value from http call - but subsequent calls it'll be null again 
        return this.funds;
    }
    //...

我一直在关注本教程btw - http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

我无法理解为什么this.funds每次都重置为null。我没有刷新浏览器，只是使用Angular Router来导航“pages”（组件/模板），我假设每次都会将FundsService注入到每个新组件中，所以当我重新加载这个组件时，它将具有相同的单例实例。之前，对吗？那么this.funds将从之前的http调用设置，而不是重新初始化为null。

以下是使用该服务的组件：

export class FundsListComponent implements OnInit {

    constructor(
        private fundsService: FundsService,
        private loadingService : LoadingService) { }

    funds: Fund[];

    /**
    * Initialize the directive/component after Angular first displays the data-bound
    * properties and sets the directive/component's input properties.
    * Called once, after the first ngOnChanges().
    */
    ngOnInit() : void {

        this.fundsService.getFunds()
            .subscribe(
                funds => {
                    return this.funds = funds
                },
                error => console.log(error)
            );
    }