为啥每次都重复调用 ngOnInit

Posted 2023-02-22

【中文标题】为啥每次都重复调用 ngOnInit

【英文标题】：Why ngOnInit is getting called every time repeatedly为什么每次都重复调用 ngOnInit

【发布时间】：2018-06-13 18:50:45

【问题描述】：

Per Angular (https://angular.io/api/core/OnInit 说 ngOnInit 在第一次检查指令的数据绑定属性之后立即调用，并且在检查其任何子项之前。当指令被实例化。），

所以 ngOnInit 应该被调用一次，但如plunker 所示（即来自https://angular.io/tutorial/toh-pt5 的副本），我只修改了 app/heroes/heroes.component.ts 和 app/dashboard/dashboard.component.ts 拥有 console.log

并且当F12（开发者工具）打开时，当路由改变时控制台会重复显示日志。

我看过 why ngOnInit called twice? , Difference between Constructor and ngOnInit , Angular 2 App Component ngOnInit called twice when using iframe , ngOnInit called everytime i change route

但不明白为什么每次都调用 ngOnInit。

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

【参考方案1】：

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

将此添加到DashboardComponent 以亲自查看：

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

【参考方案2】：

我的问题是我引导子组件的方式。 在我的@NgModule 装饰器的元数据对象中，我在引导属性中传递了child component 和parent component。 在引导属性中传递子组件正在重置我的子组件属性并使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
 )

【参考方案3】：

我可能是错的，但我相信您希望 OnInit 触发两次。您需要能够将组件的初始实例化与顺序实例化分开。因此，如果我想要第一次执行某些东西，并且只是第一次将它放入构造函数中。如果组件没有延迟加载，则构造函数只会在初始实例化时被调用。但是，如果我想在每次路由返回到组件时调用一些东西，它会进入 onInit。

【讨论】：

施工方不应该收费