ngOnInit和ionViewWillLoad生命周期挂钩/事件之间的相关性

Question

自从我使用Ionic Framework（最新的ionic-angular 3.9.2）构建渐进式Web应用程序已经过去了几个月。在此期间，我一直想知道的区别ngOnInit和ionViewWillLoad。

如果我没看错，我相信这ngOnInit是一个Angular生命周期挂钩，它会初始化指令和组件。（设置指令/组件的输入属性。）

ionViewWillLoad是Ionic导航生命周期事件，它似乎在ionViewDidLoad （所有内容均已加载）事件触发之前执行。看来ionViewWillLoad事件尚未添加到NavController，文档也尚未更新。

据我所知，JavaScript引擎会调用构造函数，因此应避免将其用于复杂的初始化。（详细信息：为什么应避免使用复杂的构造函数逻辑）

因此，我习惯ionViewWillLoad在Ionic设置输入属性之后设置组件。

我不确定为什么，但是这ionViewWillLoad是唯一没有任何错误发生的事件。

export class UsernamePage {
  usernameControl: FormControl;

  constructor(private userService: UserServiceProvider){ }

  // No errors
  ionViewWillLoad() { this.createUsernameForm(); }

  // Errors
  ionViewWillEnter() { this.createUsernameForm(); }
  ionViewDidEnter() { this.createUsernameForm(); }
  ionViewDidLoad() { this.createUsernameForm(); }

  createUsernameForm() {
    this.usernameControl = new FormControl('',
    {
      validators: [Validators.required, Validators.minLength(4)],
      asyncValidators: CustomValidator.username(this.userService)
    });
  }
}

我应该坚持使用ionViewWillLoad吗？还是实现OnInit接口更好？有什么不同？

Answer 1

注意：对于 V3，我在提到生命周期方法时交替使用术语“钩子”和“事件”。

据我所知，ionViewWillLoad它不是最新版本的 Ionic V3 中的生命周期钩子之一。我很想知道您在其他生命周期事件中看到的具体错误。但就目前而言，我将这个答案瞄准了几个基本问​​题：

1）AngularngOnInit和 Ionic 有什么区别ionViewDidLoad？这个比那个好吗？

有趣的是，AngularngOnInit和ngOnDestroy生命周期钩子与 IonicionViewDidLoad和ionViewWillUnload生命周期事件（分别）之间似乎有重叠的目的。它们仅在（分别）创建或删除页面时调用，这可能不会像您想象的那样频繁发生，因为 Ionic 倾向于缓存页面以获得更好的移动体验。

在 V3 的子/子组件中，您唯一的选择是使用 Angular 生命周期钩子。在 V3 的页面级组件（从 a 推送/弹出的 AKA 组件NavController）中，您可以互换使用它们，但我只会选择其中一个，而不是两者，并且保持一致。在 Ionic V4 中，他们通过删除ionViewDidLoad和为您做出了这个选择ionViewWillUnload。

2）Angular 的ngOnInit和 Ionic 的有ionViewWillEnter什么区别？这个比那个好吗？

首先，这些问题只适用于页面级组件，因为 Ionic Lifecycle 事件只能用于页面级组件（V3 文档）。子/子组件对 Ionic Lifecycle Events 一无所知，因为它们没有被推/弹出NavController（这可能是您看到错误的原因？）。

这两个特定事件之间的主要区别在于它们触发的顺序以及触发的频率。创建页面级组件时，ngOnInit将在 before 之前触发ionViewWillEnter。然而，页面不一定会被销毁（因此以后不会重新创建），除非它们从导航堆栈中弹出（V3 文档）。

默认情况下，如果页面被导航离开但仍在导航堆栈中（push()例如a 上的退出页面），则页面会被缓存并留在 DOM 中。当从导航堆栈中移除时（在pop()或 上setRoot()），它们将被销毁。

我不会说一个比另一个更好。您可以同时实施。请注意，这ngOnInit可能不会像您期望的那样频繁/持续地触发。ionViewWillEnter每当页面即将进入并成为活动页面时触发。

对于 Ionic V4 (Angular)

V4 中的生命周期事件要简单得多。有一半的 Ionic 生命周期事件，并且它们在功能上与我在 v3 中提到的 Angular 生命周期事件没有重叠。下面是每个和良好的解释实际指导各地的角和离子生命周期事件的使用

主要内容是相似的（我相信适用于 V3）。

页面只有在“弹出”时才会从 DOM 中删除，例如，通过按下 UI 中的后退按钮或浏览器的后退按钮。

由于这种特殊处理，ngOnInit和ngOnDestroy方法可能不会在您通常认为应该触发时触发。

ngOnInit只会在每次新创建页面时触发，但不会在导航回页面时触发。例如，在 tabs 界面中的每个页面之间导航只会调用每个页面的ngOnInit方法一次，但不会在后续访问中调用。ngOnDestroy只会在页面“弹出”时触发。