Angular2中如何从localStorage或其他Observable返回Observable？

看起来你想让你的贷款类型服务能支持直接以类似this.loanTypes的方式访问数据，同时保留原有的异步Observable能力对吧？我先帮你梳理下原代码里的小问题，再给出完整的实现方案。

原代码里的get()函数有个逻辑漏洞：当缓存无效时，你调用this.getAll().subscribe()后把Subscription对象赋值给了response，但这个response并不是Observable，会导致外部订阅get()时拿不到正确的数据。

下面是修改后的服务实现，完美满足你的需求：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class LoanTypeService {
  // 新增公开属性，直接用来存储贷款类型数据
  public loanTypes: any[] = [];

  constructor() {
    // 服务初始化时，先尝试从本地缓存加载数据到属性中
    const isCacheValid = localStorage.getItem('loantypes_are_valid') === '1';
    if (isCacheValid) {
      this.loanTypes = JSON.parse(localStorage.getItem('loantypes') || '[]');
    }
  }

  // 假设这是你原本的获取远程数据的方法，比如调用API
  getAll(): Observable<any[]> {
    // 这里替换成你实际的API请求逻辑，比如：
    // return this.http.get<any[]>('/api/loan-types');
    // 下面是模拟数据示例
    return of([
      { id: 1, name: '个人按揭贷款' },
      { id: 2, name: '经营性信用贷款' },
      { id: 3, name: '公积金贷款' }
    ]);
  }

  get(): Observable<any[]> {
    const isCacheValid = localStorage.getItem('loantypes_are_valid') === '1';
    
    // 如果缓存有效且已经有数据，直接返回包含现有数据的Observable
    if (isCacheValid && this.loanTypes.length > 0) {
      return of(this.loanTypes);
    }

    // 缓存无效时，请求远程数据，同时更新服务属性和本地缓存
    return this.getAll().pipe(
      tap((result) => {
        this.loanTypes = result;
        localStorage.setItem('loantypes', JSON.stringify(result));
        localStorage.setItem('loantypes_are_valid', '1');
      })
    );
  }
}

两种使用方式 #

1. 直接访问服务属性 #

当你确定数据已经加载完成后（比如页面初始化时调用过get()），就可以直接通过服务的属性访问数据：

import { Component, OnInit } from '@angular/core';
import { LoanTypeService } from './loan-type.service';

@Component({
  selector: 'app-loan-list',
  template: `
    <div *ngFor="let type of loanTypes">
      {{ type.id }} - {{ type.name }}
    </div>
  `
})
export class LoanListComponent implements OnInit {
  loanTypes: any[] = [];

  constructor(private loanTypeService: LoanTypeService) {}

  ngOnInit(): void {
    // 先调用get()确保数据加载完成
    this.loanTypeService.get().subscribe(() => {
      // 之后就可以直接拿服务里的属性了
      this.loanTypes = this.loanTypeService.loanTypes;
    });
  }
}

2. 订阅Observable获取数据（推荐用于异步场景） #

如果需要监听数据的变化，或者不确定数据是否已加载，直接订阅get()方法即可，同时服务的loanTypes属性也会同步更新：

this.loanTypeService.get().subscribe((data) => {
  this.loanTypes = data;
  // 此时 this.loanTypeService.loanTypes 也等于 data
});

核心改进说明 #

• 新增public loanTypes属性，让你可以直接以this.loanTypeService.loanTypes的方式访问数据
• 使用RxJS的tap操作符，在获取到远程数据后同步更新服务属性和本地缓存，避免了原代码中返回Subscription的错误
• 服务初始化时自动加载缓存数据，提升首次访问的响应速度
• 确保get()方法始终返回Observable，完全符合RxJS的异步编程规范

内容的提问来源于stack exchange，提问作者netdjw