为什么 ngOnInit 会被重复调用多次？

Question

根据 Angular（https://angular.io/api/core/OnInit）的说法，ngOnInit "在指令的数据绑定属性首次检查后立即调用，以及在任何子级被检查之前。它仅在指令实例化时调用一次."

因此，ngOnInit应该只会被调用一次，但是如这个示例所示（是从https://angular.io/tutorial/toh-pt5复制的），我只对app/heroes/heroes.component.ts和app/dashboard/dashboard.component.ts进行了修改，添加了console.log。

当按F12（开发者工具）打开时，每次路由更改时控制台都会重复显示日志。

我查看了为什么ngOnInit会被调用两次？、构造函数和ngOnInit之间的区别、使用iframe时Angular 2 App Component的ngOnInit会被调用两次、我每次更改路由时都会调用ngOnInit，但无法理解为什么ngOnInit会被反复调用。

console.log("ngOnInit in All Heroes");
console.log("ngOnInit InDashBoard");

- Neil

Answer 1

当路由改变时，组件会被 销毁，然后当路由再次改变时，组件会被 重新初始化。

将以下代码添加到DashboardComponent中以查看效果：

    ngOnDestroy() {
      console.log("ngOnDestroy InDashBoard");
    }

- hayden

Answer 2

在我的情况下，问题出在我引导子组件的方式上。 在我的@NgModule装饰器的元数据对象中，我在引导属性中传递了子组件和父组件。 将子组件传递到引导属性中会重置我的子组件属性，并使OnInit()被触发两次。

@NgModule({
 imports: [ BrowserModule,FormsModule ], // to use two-way data binding ‘FormsModule’
declarations: [ parentComponent,Child1,Child2], //all components
 //bootstrap: [parentComponent,Child1,Child2] // will lead to errors in binding Inputs in Child components
 bootstrap: [parentComponent] //use parent components only
 })

- Ramesh Rajendran

Answer 3

我可能错了，但我认为您希望OnInit触发两次。您需要能够确定组件的初始实例化与顺序实例化分开。因此，如果我希望某些内容在第一次执行且仅在第一次执行时被执行，则将其放入构造函数中。如果组件未进行延迟加载，则构造函数仅在初始实例化时调用。但是，如果我想每次路由返回到组件时都调用某些内容，则将其放入onInit中。

- user16252527

---

构造函数不应该被收费。 - Vega