Angular 2和Ionic 2:构造函数、ionViewDidLoad和ngOnInit方法有什么区别?

Question

构造函数、ionViewDidLoad和ngOnInit方法的区别是什么?

Answer 1

构造函数

constructor不是Angular的特性，它是由Javascript引擎调用的。虽然是用TypeScript写的，但它是ES6的一个概念，它是类生命周期钩子的一部分。因此，要知道Angular何时完成了对组件的初始化，这里不是一个好地方。

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

ngOnInit

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

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

ionViewDidLoad

ionViewDidLoad是离子导航生命周期事件。Ionic有页面的概念。它有一些与导航逻辑相关的类，它的基类是NavController。它们有导航堆栈的概念，所以页面基本上是从堆栈中推送或弹出的。在这个过程中，像ionViewDidLoad这样的生命周期事件被触发。

ionViewDidLoad在页面加载后被调用。默认情况下，页面被缓存，这意味着如果没有被销毁，则不会再次触发此事件。

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

引用:

离子NavControler

Angular生命周期钩子

ES6类

Answer 2

尽管niks的回答确实指出了正确的生命周期事件触发顺序，但Angular团队建议不要在构造函数中获取数据。

但是为了回答你的问题，ionViewDidLoad()和ngOnInit()应该同时运行，所以它们本质上是一样的;但是，ionViewDidLoad()检查缓存:

如果页面离开但被缓存，则此事件将不会再次触发后续查看。

有了这个，对于任何你不希望缓存，但想要加载/组件得到挂载之前，你应该使用ionViewWillEnter()，或ionViewWillLoad()的东西，如GET请求。ionViewWillLoad()尚未被记录

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)     
        }
    }

注意构造函数如果我们想使用这个服务方法我们将转到view/page，然后:

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是什么。你已经准备好了service方法，现在在视图/页面中你想要学生列表数据在视图出现时就可用，这应该是加载时自动发生的第一个操作，因为视图加载时学生列表应该是可见的。所以这个类实现OnInit，你定义ngOnInit。例子:

export class HomePage implements OnInit {
...
....
constructor(....){}
ngOnInit(){
    this._studentService.getAllStudents().subscribe(
     (students: Students[]) => this.students = students, 
    )

我希望这个解释能消除你对这两点的疑虑。由于

Answer 4

最佳实践是:

constructor只用于依赖注入。

使用ngOnInit从静态数据或导航数据(通过NavParams)设置组件属性。模板可以使用ngOnInit设置的属性，即不需要使用猫王运算符data?.prop检查null。它只在创建组件时被调用一次。

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

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

对于ionViewDidLoad和ionViewWillEnter事件，在呈现页面模板时不会初始化组件属性。在访问对象的成员之前，应该使用Elvis操作符检查对象的null。