Question

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");

Answer 1

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

将此添加到DashboardComponent以便自己查看：

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

Answer 2

我的案例中的问题就是我引导子组件的方式。在我的@NgModule装饰器的元数据对象中，我将child component与parent component一起传递到bootstrap属性中。在bootstrap属性中传递子组件是重置我的子组件属性并使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
 })

Answer 3

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

为什么每次重复调用ngOnInit

3 个答案: