订阅/监听Ionic2的视图生命周期
来源:互联网 发布:原生js display 编辑:程序博客网 时间:2024/04/29 18:10
订阅/监听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
- 订阅/监听Ionic2的视图生命周期
- ionic2页面的生命周期
- Ionic2 NavController模块的生命周期事件
- Ionic2视图的创建与删除
- ionic2 监听back键;监听navbar的返回键
- 监听Activity的生命周期
- ionic2@beta 生命周期
- ionic2开发(一)NavController模块的生命周期事件
- 视图控制器的生命周期
- 视图控制器的生命周期
- 视图控制器的生命周期
- 视图控制器的生命周期
- 视图的生命周期
- 视图控制器的生命周期
- iOS 视图的生命周期
- UIKit 视图的生命周期
- 视图控制器 的生命周期
- iOS视图的生命周期
- Java语言基础知识
- Linux Find 命令
- ubuntu下设置python默认版本
- java任意进制转换
- 【2016普及组模拟考试】01 贪心 game(接数游戏)
- 订阅/监听Ionic2的视图生命周期
- Maven项目部署到tomcat+部署中的各种问题
- Gson—使用详解(1)
- java 反射
- MD5加密(密码加密)
- 基于python的pixiv爬虫
- windows中查看进程和结束进程的命令
- codeforces 711DDirected Roads dfs
- 计数排序,传说中时间复杂度O(n+k)的排序算法