触发Angular App中的$ onChanges

Question

I have a component "MealItemCollection" with an $onChanges function in my Angular app. The component is used by two separate parent components, "Recipe" and "MealPlan". Both parent components pass in an "items" prop the exact same way.

However, while the $onChanges function works properly when changes to items are passed from the MealPlan component, it only works 1 time when changes to items are passed from the Recipe component. That is, when I have 0 items and add 1, the $onChanges triggers, but when I have 1 item and add to it, the $onChanges does not trigger.

In the recipe parent component, I have a "recipeModel" object with an items attribute. When I add an item, it does in fact add an item to recipeModel.items, as verified by console.logs. But for whatever reason the changes to the items prop are not being passed down to the MealItemCollection component.

I have attempted subbing out $onChanges with $doCheck but that is not working because, like I said, the changes to the items prop are not being passed down into the MealItemCollection component.

Does anybody have any idea what could possibly be going on here?

Answer 1

For some reason this code:

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

after the recipeModel has been updated and that is enough to trigger the onChanges in the child component.

Does anybody have any idea what is going on here?