Angular 4项目中刷新食谱详情页时如何持久化单条食谱数据？

没错，你确实得通过API调用来实现刷新详情页后的数据持久化——这里给你拆解下原因和具体做法：

为什么必须用API？ #

你现在用Subject传递数据的方式，本质是把数据存在Angular应用的内存里。一旦页面刷新，整个Angular应用会重启，内存里的所有临时数据（包括Subject里的内容）都会被清空。这时候详情页根本拿不到之前传递的食谱数据，只能从后端重新获取。

具体实现步骤 #

1. 修改路由，传递食谱ID
   首先调整你的路由配置，让详情页路由支持接收食谱ID作为参数：

   // 在路由模块里配置
   const routes: Routes = [
     // 其他路由...
     { path: 'recipes/:id', component: RecipeDetailComponent }
   ];
   

   然后在食谱列表组件里，点击导航时传递ID而不是整个对象：

   // 列表组件的点击事件处理
   onRecipeClick(recipe: Recipe) {
     this.router.navigate(['/recipes', recipe.id]);
   }
   

2. 详情页通过ID调用API获取数据
   在详情组件里，借助ActivatedRoute拿到路由里的ID，再调用你的API获取对应食谱的完整信息：

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   import { RecipeService } from '../recipe.service';
   import { Recipe } from '../recipe.model';
   
   @Component({
     selector: 'app-recipe-detail',
     templateUrl: './recipe-detail.component.html'
   })
   export class RecipeDetailComponent implements OnInit {
     currentRecipe: Recipe;
   
     constructor(
       private route: ActivatedRoute,
       private recipeService: RecipeService
     ) {}
   
     ngOnInit() {
       // 订阅路由参数变化，确保从其他食谱导航过来也能更新数据
       this.route.params.subscribe(params => {
         const recipeId = +params['id']; // 把字符串ID转成数字
         this.recipeService.getRecipeById(recipeId).subscribe(recipe => {
           this.currentRecipe = recipe;
         });
       });
     }
   }
   

   对应的服务层API调用方法大概是这样：

   // recipe.service.ts
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { Recipe } from './recipe.model';
   
   @Injectable({ providedIn: 'root' })
   export class RecipeService {
     constructor(private http: HttpClient) {}
   
     getRecipeById(id: number): Observable<Recipe> {
       return this.http.get<Recipe>(`/api/recipes/${id}`);
     }
   }
   

3. 可选优化：添加内存缓存
   如果你的食谱数据不经常更新，可以在服务层加个内存缓存，减少重复API请求：

   // recipe.service.ts 里新增缓存逻辑
   private recipeCache = new Map<number, Recipe>();
   
   getRecipeById(id: number): Observable<Recipe> {
     // 如果缓存里有，直接返回缓存数据
     if (this.recipeCache.has(id)) {
       return of(this.recipeCache.get(id));
     }
     // 没有的话调用API，并存入缓存
     return this.http.get<Recipe>(`/api/recipes/${id}`).pipe(
       tap(recipe => this.recipeCache.set(id, recipe))
     );
   }
   

   注意：这种缓存还是内存级的，刷新页面后就没了，所以核心还是得靠API获取初始数据。

其他备选方案（不推荐） #

你也可以把食谱数据存在localStorage或sessionStorage里，但这种方式只适合数据量小、不敏感的场景，而且容易出现数据不一致的问题——比如后端更新了食谱，本地存储的旧数据不会自动同步。所以最可靠、最通用的方案还是通过API根据ID获取数据。

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