订阅/监听Ionic2的视图生命周期
订阅/监听Ionic2的视图生命周期接触Ionic2不久难免说的不到位,权威教程请参见Ionic2官方文档。
Ionic2的生命周期
开始吧
注入ViewControllerimport {Component} from '@angualr/core';
import {ViewController} from 'ionic-angular';
@Component({
templateUrl: '...',//此处省略
})
export class TestPage{
public constructor(
private viewCtrl: ViewController
){
}
}
订阅ViewController事件接下来我们添加代码/// ... 省略上方代码
export class TestPage{
public constructor(
private viewCtrl: ViewController
){
/// 订阅didEnter事件
viewCtrl.didEnter.subscribe(this.onDidEnter);
}
/// didEnter回调
public onDidEnter(){
console.log("我们进入了视图");
}
}
别高兴的太早其实上面的代码是不健全的,你找到问题了吗? /// ... 省略上方代码
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保存的字符串, 没错,这就是问题。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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |