angular - ngOnInit 和 ionViewWillLoad 生命周期钩子(Hook)/事件之间的关联

Question

自从我使用 Ionic Framework(ionic-angular 3.9.2 latest)构建 Progressive Web Apps 以来已经有几个月了。与此同时，我一直想知道 ngOnInit 和 ionViewWillLoad 之间的区别。

如果我没记错的话，我相信 ngOnInit 是一个 Angular lifecycle hook并初始化指令和组件。 (设置指令/组件的输入属性。)

ionViewWillLoad 是一个 Ionic navigation lifecycle event , 它似乎在 ionViewDidLoad (Everything has already been loaded) 事件被触发之前执行。看起来 ionViewWillLoad 事件还没有添加到 NavController，文档也还没有更新。

据我所知，构造函数由 JavaScript 引擎调用，应该避免将其用于复杂的初始化。 ( details: why you should avoid complex constructor logic )

因此，在 Ionic 设置输入属性后，我使用了 ionViewWillLoad 来设置组件。

我不确定为什么，但是 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，我在提及生命周期方法时交替使用术语“ Hook ”和“事件”。

据我所知，ionViewWillLoad不是最新版本的 Ionic V3 中的生命周期 Hook 之一。我很想知道您在其他生命周期事件中具体看到了哪些错误。但就目前而言，我的回答是针对几个基本问​​题:

1) Angular 的 ngOnInit 有什么区别？和 Ionic 的 ionViewDidLoad ？一个比另一个好吗？

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

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

2) Angular 的 ngOnInit 有什么区别？和 Ionic 的 ionViewWillEnter ？一个比另一个好吗？

首先，这些问题仅适用于页面级组件，因为 Ionic 生命周期事件只能用于页面级组件 (V3 documentation)。子/子组件对 Ionic 生命周期事件一无所知，因为它们不会被 NavController 推送/弹出(这可能是您看到错误的原因？)。

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

By default, pages are cached and left in the DOM if they are navigated away from but still in the navigation stack (the exiting page on a push() for example). They are destroyed when removed from the navigation stack (on pop() or setRoot()).

我不会说一个比另一个更好。您可以同时实现两者。请注意 ngOnInit可能不会像您预期的那样频繁/一致地触发。 ionViewWillEnter每当页面即将进入并成为事件页面时触发。

对于 Ionic V4( Angular )

生命周期事件在 V4 中更加直接。 Ionic 生命周期事件的数量只有一半，并且它们在功能上与 Angular 生命周期事件没有重叠，就像我在 v3 中提到的那样。每个和actual guidance都有很好的解释usage of Angular and Ionic lifecycle events周围

主要内容类似(我相信适用于 V3)。

Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button.

Because of this special handling, the ngOnInit and ngOnDestroy methods might not fire when you would usually think they should.

ngOnInit will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's ngOnInit method once, but not on subsequent visits. ngOnDestroy will only fire when a page "popped".