当*ngFor因ingredients变化重循环时，ngOnInit会被调用吗？

用户代码本身无问题，仅想理解ngOnInit的实际运行机制，相关代码如下：

HTML代码 #

<ul class="list-group">
      <a
        class="list-group-item"
        style="cursor: pointer"
        *ngFor="let ingredient of ingredients">
        {{ ingredient.name }} ({{ ingredient.amount }})
      </a>
</ul>

TypeScript组件代码 #

export class ShoppingListComponent implements OnInit {
  ingredients: Ingredient[]
  
  constructor(private shoppingListSerivce: ShoppingList) { }

  ngOnInit() {
    this.ingredients = this.shoppingListSerivce.ingredients
    this.shoppingListSerivce.ingredientAdded.subscribe(
      (ingredient: Ingredient) => this.shoppingListSerivce.addIngredient(ingredient)
    )
  }
}

疑问 #

当ingredients数组内容变化导致*ngFor重新渲染时，ngOnInit钩子函数会被再次调用吗？

回答 #

不会。

ngOnInit是Angular组件生命周期中的核心钩子之一，只会在组件初始化完成后执行一次：具体时机是组件实例被创建、依赖注入完成后，第一次渲染视图之前。

你遇到的场景是ingredients数组内容变化触发*ngFor重新渲染，这属于组件初始化完成后的视图更新阶段，Angular只会触发变更检测来同步视图，不会重新执行ngOnInit。

额外提一句：你的订阅逻辑中，收到ingredientAdded事件后仅调用服务的addIngredient方法，如果服务内的ingredients是直接修改数组元素（而非替换整个数组引用），Angular的变更检测能识别到变化并更新视图；但如果是替换数组引用，组件内的ingredients变量需要重新赋值才能同步视图——不过这和ngOnInit的触发逻辑无关。

内容的提问来源于stack exchange，提问作者Yousef