大佬教程收集整理的这篇文章主要介绍了订阅/监听Ionic2的视图生命周期,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
接触Ionic2不久难免说的不到位,权威教程请参见Ionic2官方文档。
import {Component} from '@angualr/core';
import {ViewController} from 'ionic-angular';
@Component({
templateUrl: '...',//此处省略
})
export class TestPage{
public constructor(
private viewCtrl: 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@L_879_25@meText);
}
}
我们的预想是当视图进入后,打印类中的成员变量this.comeText保存的字符串,
不过真正运行后发现,我们的控制台恶狠狠的打印出’undefind’。
没错,这就是问题。js实在是太笨了,它吧我们的this指针搞丢了,此时onDidEnter函数的this指针,早已不是指向TestPage,取而代之的是onDidEnter函数本身。
说的比较绕,反正你要明白一点,当我们把函数传入viewCtrl一瞬间,你就丢失了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
以上是大佬教程为你收集整理的订阅/监听Ionic2的视图生命周期全部内容,希望文章能够帮你解决订阅/监听Ionic2的视图生命周期所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。