Question

构造函数，ionViewDidLoad和ngOnInit方法之间有什么区别。在每种情况下哪些行动是适当的。

Answer 1

构造

constructor不是Angular功能，它由Javascript引擎调用。好吧，用TypeScript编写，但它是一个ES6概念，它是类生命周期钩子的一部分。因此，当Angular完成其组件的初始化时，它不是一个好地方。

这是进行任何依赖注入的正确位置。

<强> ngOnInit

ngOnInit是一个Angular生命周期钩子。它在Angular完成组件设置时执行。这意味着此时例如完成属性绑定。

这是初始化组件的一些数据的好地方。

<强> ionViewDidLoad

ionViewDidLoad是离子导航生命周期事件。 Ionic有一个页面概念。它有一些与导航逻辑相关的类，它的基类是 NavController 。它们具有导航堆栈的概念，因此页面基本上是从堆栈中推出或弹出的。在此导航过程中，会激活生命周期事件，例如 ionViewDidLoad 。
加载页面后，将调用
ionViewDidLoad 。页面默认是缓存的，这意味着如果没有销毁，该事件将再次被激活。

考虑到这是为页面设置代码的好地方。

<强> 参考文献：

Ionic NavControler

Angular Lifecycle Hooks

ES6 Classes

Answer 2

虽然niks的回答确实指出了正确的生命周期事件触发顺序，但Angular团队recommends against fetching data inside constructors。

但是要回答你的问题，ionViewDidLoad()和ngOnInit()应该在同一时间运行，所以它们基本上是一回事;但是，ionViewDidLoad() checks for caching：

如果页面已离开但已缓存，则此事件不会再次触发随后的观看。

有了这个，对于任何你不想缓存的东西，但想要在组件加载之前/之前加载，你应该使用ionViewWillEnter()或ionViewWillLoad()来处理GET请求之类的东西。 ionViewWillLoad() has yet to be documented

Answer 3

关于ionic2，constructor：简单来说，我们用它来创建我们的插件，服务等实例，例如：你有一个页面（视图），你想要显示所有学生的列表，你有一个包含所有学生的json文件（这个文件是你的数据文件）你需要做的是在这个服务中创建一个服务，你将创建一个方法并点击http.get请求获取json数据，所以在这里你需要什么？ http只是这样做：

import {Http} from '@angular/http';
@Injectable()
export class StudentService{
    constructor(public http: Http){}
    getAllStudents(): Observable<Students[]>{
        return this.http.get('assets/students.json')
        .map(res => res.json().data)     
        }
    }

现在再次注意构造函数如果我们想要使用这个服务方法，我们将转到我们的视图/页面并：

import {StudentService} from './student.service';
import { SocialSharing } from '@ionic-native/social-sharing';
export class HomePage implements OnInit {

  constructor(public _studentService: StudentService, public socialSharing: SocialSharing) {
   }

再次注意这里的构造函数，我们在构造函数中创建了一个StudentService实例，还有一件事，我们正在使用socialSharing插件，所以我们也在构造函数中创建它的实例。

OnInit：这在ionic2中真的很神奇，或者我们可以在AngularJs2中说。通过上面的例子，我们可以看到ngOnInit是什么。因此，您已准备好使用服务方法，现在在您的视图/页面中，您希望在您的视图出现后立即显示学生列表数据，这应该是第一个在加载时自动发生的操作，因为视图加载了学生列表应该是可见的。因此，该类实现OnInit并定义ngOnInit。例如：

export class HomePage implements OnInit {
...
....
constructor(....){}

ngOnInit(){
    this._studentService.getAllStudents().subscribe(
     (students: Students[]) => this.students = students, 
    )

我希望这个解释能够清除你对这两个问题的怀疑。感谢

Answer 4

最佳做法是：

仅将constructor用于依赖注入。

使用ngOnInit从静态数据或导航数据（通过NavParams）设置组件属性。模板可以使用ngOnInit设置的属性，即不需要使用Elvis运算符data?.prop来检查无效性。创建组件时只调用一次。

使用ionViewDidLoad只设置一次属性，类似于ngOniInit。页面仅在创建时触发此事件一次。从缓存加载的页面（例如，在弹出首页后加载页面）不会触发此事件。可以使用它来设置模态页面的属性，因为模态页面位于堆栈的顶部而不是缓存。

每次输入页面时，使用ionViewWillEnter设置数据。与ngOninit和ionViewDidLoad不同，它甚至会从缓存页面触发。

对于ionViewDidLoad和ionViewWillEnter事件，在呈现页面模板时不会初始化组件属性。在访问对象之前，您应该使用Elvis运算符检查对象的无效性。

Angular 2和Ionic 2：构造函数，ionViewDidLoad和ngOnInit方法之间有什么区别

4 个答案: