Angular 更改管线后角度组件特性值消失

我不熟悉角度发展。我试图构建一个配方列表组件，通过调用api并将返回的配方对象推送到列表中，可以在列表中添加配方项。它很好用。但只要我把路线改成其他路线，一切都会重置。 这是

配方列表.component.ts的代码

import { Component, OnInit } from '@angular/core';
import { RecipeModel } from '../recipe.model';
import { axiosClient } from '../../axiosApi/axiosApi';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})

export class RecipeListComponent implements OnInit {
  private axiosClient: axiosClient;
  recipeList: RecipeModel[] = [];
  constructor(axiosClient: axiosClient) { 
    this.axiosClient = axiosClient;
  }

  ngOnInit(): void {
  }

  getRandomRecipe(): void {
    this.getRandomRecipeHelper()
    .then(recipe => {
      this.recipeList.push(recipe);
    });
  }

  async getRandomRecipeHelper(): Promise<RecipeModel> {
    try {
      let recipeObject = await this.axiosClient.get<any>({
        url: "https://www.themealdb.com/api/json/v1/1/random.php",
      });
      let meal_info: any = recipeObject.meals[0];
      let title = meal_info['strMeal'];
      let body = meal_info['strInstructions'];
      let category = meal_info['strCategory'];
      let area = meal_info['strArea'];
      let thumbnail = meal_info['strMealThumb'];
      let link = meal_info['strYoutube'];
      let ingredients: {name: string, measure: string}[] = [];
      for (let i = 1; i <= 20; i++) {
        if (meal_info['strIngredient' + i] !== "" && meal_info['strMeasure' + i] !== "") {
          ingredients.push({'name': meal_info['strIngredient' + i], 'measure': meal_info['strMeasure' + i]});
        }        
      }
      let recipe = new RecipeModel(title, body, category, area, thumbnail, link, ingredients);
      return new Promise<RecipeModel>((resolve, reject) => {resolve(recipe)});
    }
    catch(error) {
      console.error(error);
    }
  }
  
}

从'@angular/core'导入{Component，OnInit}；
从“../recipe.model”导入{RecipeModel}；
从“../../axiosApi/axiosApi”导入{axiosClient}；
@组成部分({
选择器：“应用程序配方列表”，
templateUrl:'./recipe list.component.html'，
样式URL:['./recipe list.component.css']
})
导出类RecipeListComponent实现OnInit{
私人axiosClient:axiosClient；
recipeList:RecipeModel[]=[]；
构造函数（AxioClient:AxioClient）{
this.axioclient=axioclient；
}
ngOnInit（）：void{
}
getRandomRecipe（）：void{
this.getRandomRecipeHelper（）
.然后（配方=>{
此.recipeList.push（配方）；
});
}
异步getRandomRecipeHelper（）：承诺{
试一试{
让recipeObject=等待this.axioClient.get({
url:“https://www.themealdb.com/api/json/v1/1/random.php",
});
让膳食信息：any=recipeObject.Founds[0]；
let title=膳食信息['strMeal']；
let body=膳食信息[‘指令’]；
let category=膳食信息['strCategory']；
let area=餐饮信息['strArea']；
让缩略图=膳食信息['strMealThumb']；
let link=膳食信息['strYoutube']；
让成分：{name:string，measure:string}[]=[]；
for（设i=1；i{resolve（recipe）}）；
}
捕获（错误）{
控制台错误（error）；
}
}
}

我在
/recipes
中的
recipe.component.ts
中有配方列表组件，还有
/shopping
和
/home
。
如果有人能帮我解决问题，那就太好了。谢谢。
当我从配方列表类定义内部手动填充列表数组时，不会发生这种情况。因此，问题似乎与axiosClient observable有关。问题还不清楚！重置了什么？也许你可以加上你的路线，我想我找到了。显然，当我们改变路径时，角度会破坏路径的组件。因此，每当我切换到其他路径并返回到/recipes时，RecipeComponent会被重建，因此其中的RecipeListComponent也会被重置，因此数组初始化为空数组。但是，该状态不会在页面重新加载时持续。然而，这是一个不同的问题，我可能需要使用ngRx。我想知道是否有其他方法可以确保页面重新加载后的数据持久性而不依赖服务器端？也许可以了解RouterUseStrategy