在 Angular 应用程序中触发 $onChanges

Question

我的 Angular 应用程序中有一个带有 $onChanges 函数的组件 "MealItemCollection"。该组件由两个独立的父组件 "Recipe" 和 "MealPlan" 使用。两个父组件都以完全相同的方式传递 "items" 属性。

但是，虽然 $onChanges 函数在从 MealPlan 组件传递对项目的更改时正常工作，但当从 Recipe 组件传递对项目的更改时它只工作 1 次。也就是说，当我有 0 个项目并添加 1 个时，$onChanges 触发，但是当我有 1 个项目并添加到其中时，$onChanges 不会触发。

在食谱父组件中，我有一个带有 items 属性的 "recipeModel" 对象。当我添加一个项目时，它实际上会向 recipeModel.items 添加一个项目，正如 console.logs 所验证的那样。但是无论出于何种原因，对 items 属性的更改都没有传递到 MealItemCollection 组件。

我曾尝试用 $doCheck 替代 $onChanges，但这不起作用，因为正如我所说，对 items 道具的更改没有传递到 MealItemCollection 组件中。

有人知道这里会发生什么吗？

Answer 1

出于某种原因，此代码：

ctrl.recipeModel.ingredients = _.clone(ctrl.recipeModel.ingredients);

recipeModel 更新后足以触发子组件中的 onChanges。

有人知道这里发生了什么吗？