更改路线后角组件的属性值消失了

问题描述

我是Angular开发的新手。我试图构建一个配方列表组件，在其中您可以通过调用api并将返回的配方对象推入列表中来在列表中添加配方项目。它工作正常。但是，一旦我将路线更改为其他路线，一切都会重置。这是recipe-list.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);
    }
  }
  
}

我在recipe.component.ts的{{1}}中有一个配方列表组件，还有/recipes和/shopping。如果有人可以帮助我解决这里存在的问题，那将是很好的。谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular2-routing