订阅/监听Ionic2的视图生命周期
接触Ionic2不久难免说的不到位，权威教程请参见Ionic2官方文档。
by wilhan.tian 欢迎转载，转载请注明出处。
Ionic2的生命周期
开始吧
访问当前视图的各种功能和信息。 —— [ 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
