ngOnInit vs ionViewDidLoad in ionic 2 or ionic 2+

问题:

Which one will I use for initializing data and why?

ngOnInit() {
    this.type = 'category';
    this.getData();
    this.setData();
}

ionViewDidLoad() {
    this.type = 'category';
    this.getData();
    this.setData();
}

回答1:

ngOnInit is a life cycle hook called by Angular2 to indicate that Angular is done creating the component.

ionViewDidLoad is related to the Ionic's NavController lifeCycle events. It runs when the page has loaded. This event only happens once per page being created.

Basically both are good places for initializing the component's data.

But for using ngOnInit you need to implement the Angular's OnInit class, In the other hand ionViewDidLoad could be only defined for components that are pushed/popped from a NavController.

So I would say use the ionViewDidLoad for components in the NavController stack and ngOnInit for other components.

回答2:

ionViewDidLoad firing is close related to the NavController.

If you need a hook for a component that is rendered independent of the NavController (not all components in an ionic 2 app are pages) you should use angular lifecycle hooks instead of ionic navcontroller hooks.

Now, which one is suitable for you, it depends on the implementation case.

Anyway the names of all those hooks are self-explanatory most of the times.

回答3:

Both function works the same way, they get called when the view is initially loaded into the DOM.

Great blog about ionic2s lifecycle hooks here.