我应该在 Angular 中再次调用 ngOnInit() 吗？

Posted 2023-03-13

【中文标题】我应该在 Angular 中再次调用 ngOnInit() 吗？

【英文标题】：Should I call ngOnInit() again in Angular?

【发布时间】：2018-12-14 19:14:25

【问题描述】：

我是 Angular 的新手，这个问题可能听起来很愚蠢。请多多包涵。

我已经定义了我的ngOnInit 喜欢：

ngOnInit() 
 this.rowData = this.studentService.getStudents();//Make http calls to populate data

如果我需要重新加载数据，我会再次调用 ngOnInit：

onSomeEvent()
 this.ngOnInit();

这样好吗？ 或者，如果ngOnInit() 是一种代价高昂的方法，我应该再次调用 http。

【参考方案1】：

不，这不是一个好习惯。

更好的是从ngOnInit 调用一些方法，并在需要时调用相同的方法。像这样-

ngOnInit() 
 this.onLoad();


onLoad() 
this.rowData = this.studentService.getStudents();//Make http calls to populate data


onSomeEvent()
 this.onLoad();

【讨论】：

调用 ngOnInit 是否涉及一些 DOM 操作或代价高昂的东西？

如果你自己调用它就不会。但它使代码的可读性降低。 ngOnInit 有一个目的，即初始化组件。将它用于其他用途（在您的情况下，您的目的是“getListOfStudents”）使代码难以理解。其他开发人员不会期望 ngOnInit 被多次调用。小代码库中的简单问题。代码增长时的大问题。因此，最好有一个方法“getListOfStudents”并从 ngOnInit()

调用该方法

ngOnInit 在组件创建后调用，正如@JanRecker 所说，就可读性而言，这不是一个好习惯

【参考方案2】：

更好的方法：

ngOnInit()
this.loadData();


//load data

loadData()
this.rowData = this.studentService.getStudents();


//on change event
ngOnChanges()
this.loadData()


//capture data on other event
otherEvent()
this.loadData()

【讨论】：

为什么要调用ngOnChanges中的方法？

如果会有更改表单视图，或者您正在调用任何有条件加载的选择器（在我的情况下），它将使用不同的输入加载数据。但如果你没有条件视图而不是不需要，它是可选的。谢谢

这是大错特错！每当一个或多个数据绑定输入属性更改时，都会调用 ngOnChanges。这意味着很多！您不想多次发送 http 请求。

我也在说同样的事情。每当一个或多个数据绑定输入属性更改时，都会调用 ngOnChanges。但是如果数据绑定的输入属性依赖于 http 请求/响应呢？谢谢你

你真的不想那样做。做一个测试：登录控制台计数器，记录调用 ngOnChanges 的次数。对于一个庞大的页面，您在输入框中输入的每个字母可能需要 20 次调用。仅针对此评论，它就会触发 3000 次 http 请求。

【参考方案3】：

ngOnInit 是生命周期钩子，在初始化指令的数据绑定属性后调用，因此它第一次由 angualr 它自己调用，因此调用此方法会引起很多其他人的困惑并签署糟糕的代码，所以最好打破代码 insde ngOnInit 并在需要时再次调用它。

ngOnInit() 
 this.refrechItems();


public refrechItems(): void 
  // magic things
 

你可以为所有其他生命周期钩子考虑同样的事情

【参考方案4】：

请不要这样做！ Angular 有许多不同的生命周期钩子

https://angular.io/guide/lifecycle-hooks