订阅/监听Ionic2的视图生命周期

接触Ionic2不久难免说的不到位，权威教程请参见Ionic2官方文档。

by wilhan.tian 欢迎转载，转载请注明出处。

Ionic2的生命周期

• 进入视图前 willEnter
• 进入视图后 didEnter
• 离开视图前 willLeave
• 离开视图后 didLeave
• 退出视图前 willUnload
• 退出时候后 didUnload

开始吧

访问当前视图的各种功能和信息。 —— [ ViewController ]

注入ViewController

import {Component} from '@angualr/core';
import {ViewController} from 'ionic-angular';

@Component({
    templateUrl: '...',//此处省略
})
export class TestPage{
    public constructor(
        private viewCtrl: ViewController
    ){
    }
}

• 首先我们使用ES6的语法导入了Component和ViewController
• 接下来使用@Component注解了一个名为TestPage组件
• 然后我们使用ng2强大的功能，在构造函数中注入了ViewController并赋值给viewCtrl
• 现在，我们就可以在类中使用ViewController了
  

  语法糖: 上面的使用了一个常用语法糖
  如果构造函数中的参数带有private、protected、public，那么js就认为这个参数是一个类属性/变量，不仅可以在构造函数中使用，也可以在其他函数中使用。
  以上面代码为例，viewCtrl参数被声明为private变量,那么你可以在其他函数中调用this.viewCtrl来访问这个变量。

订阅ViewController事件

接下来我们添加代码

/// ... 省略上方代码
export class TestPage{
    public constructor(
        private viewCtrl: ViewController
    ){
        /// 订阅didEnter事件
        viewCtrl.didEnter.subscribe(this.onDidEnter);
    }

    /// didEnter回调
    public onDidEnter(){
        console.log("我们进入了视图");
    }
}

• 我们加入了onDidEnter函数，每当调用这个函数都会打印一句话
• 然后我们使用subscribe函数来观察didEnter这个事件
• 大功完成！这样，当视图进入后就会调用onDidEnter()函数，并在浏览器的控制台输出了一句话

别高兴的太早

其实上面的代码是不健全的，你找到问题了吗？
好吧，我们修改下代码，举个例子:

/// ... 省略上方代码
export class TestPage{
    private someText: string = "我是一些文字";

    public constructor(
        private viewCtrl: ViewController
    ){
        /// 订阅didEnter事件
        viewCtrl.didEnter.subscribe(this.onDidEnter);
    }

    /// didEnter回调
    public onDidEnter(){
        console.log(this.someText);
    }
}

我们的预想是当视图进入后，打印类中的成员变量this.comeText保存的字符串，
不过真正运行后发现，我们的控制台恶狠狠的打印出’undefind’。

没错，这就是问题。js实在是太笨了，它吧我们的this指针搞丢了，此时onDidEnter函数的this指针，早已不是指向TestPage，取而代之的是onDidEnter函数本身。

说的比较绕，反正你要明白一点，当我们把函数传入viewCtrl一瞬间，你就丢失了this，因为你没有说明这个函数的this指针是啥。

如何解决this指针丢失问题

方案1 —— 传统
我们来改造构造函数:

/// ... 省略上方代码
public constructor(
    private viewCtrl: ViewController
){
    var self = this;
    viewCtrl.didEnter.subscribe(function(){
        self.onDidEnter();
    });
}

运行下试试看，成功了！

如果你的js功底较好，完全可以明白。事先保存this指针，然后再回调中使用。运用经典的闭包解决了问题。

不过，这样真的好吗？

方案2 —— 简洁
我们换一种方式解决:

/// ... 省略上方代码
public constructor(
    private viewCtrl: ViewController
){
    viewCtrl.didEnter.subscribe(this.onDidEnter.bind(this));
}

同样成功，输入了我们预想值。

bind函数是ES5中加入的，具体解释还需各位看官自行百度。

方案3 —— 优雅
在换一种优雅的方式:

/// ... 省略上方代码
public constructor(
    private viewCtrl: ViewController
){
    viewCtrl.didEnter.subscribe(() => this.onDidEnter());
}

没错，再次按照预想输出。

这种解决方案使用到了’=>’(箭头函数)，这个功能在ES6中添加。
箭头函数可以理解为方案一的简写方式。我就不啰嗦了，具体解释自行百度吧。

如何选择？笔者个人比较喜欢方案三的解决方式，推荐二、三方案。
毕竟方案一的代码实在太过臃肿(相比而言)。
不过，虽然以上三种解决方式都可以在实际项目当中使用，但尽量保持代码风格一致，保持自己的风格。

就到这里

Ionic2和Angular2真的好强大、好现代啊！ 尼玛要学的好多，欢迎来群交流553424451