特别值是否应该作为类成员存在于组件中

Question

假设我们有一个食谱网站，其中包含一个食谱列表组件，该组件将单个食谱的卡片加载到自己身上：

<ul class="recipe-list">
<li *ngFor="let recipe of recipes" (click)="displayRecipe(recipe)">
<app-recipe-item [recipe]="recipe"></app-recipe-item></li>
</ul>

在recipe-list.component.ts中，我们可以用两种方式处理食谱：

export class RecipeListComponent implements OnInit {
recipes: Array<Recipe> = []; 1. Class member
constructor(private apiService: ApiService) {}
ngOnInit(): void {
this.recipes = fetchRecipes(); 1. Class member
}

fetchRecipes(): Array<Recipe> {
return this.apiService.fetchRecipes(); // 1. Class member
}
}

另一种方法包括通过fetchRecipes来填充自己的列表，它直接调用API，这样我们就不需要类成员，并将.ts略读几行。我的问题是——哪种方法设计得更好，原因是什么？

我正在阅读《实用程序员》，想知道哪种方法能更好地满足ETC、需求法则和正确获取价值观。

Answer 1

我个人倾向于使用Angular State Management With BehaviorSubject或NGRX Store来管理应用程序数据，例如食谱数组。

然后，组件简单地订阅由这两个组件中的任何一个暴露的可观察配方。

组件不应该决定何时、如何以及从何处获取数据。它的工作是以一种很好的方式显示配方，而不知道它们是否需要从API、缓存等中获取

假设您稍后创建另一个组件，允许用户添加食谱。使用您的方法，您需要重新访问"配方列表"组件并更改其代码，以确保它显示新配方。但是，当食谱通过州立商店的可观察内容公开时，你的食谱列表组件只会得到更新的列表，而不必为此添加任何额外的代码。