1. tab+NavController
使用tab组件,执行页面跳转后,新页面仍然会包含tab,很多时候我们希望退出tab到新的页面。这里我们不能直接使用
this.navCtrl.push(SomePage);
而要用
this.app.getRootNav().push(SomePage);
2. 删除历史记录
比如我们完成登录以后进入首页,用户操作后退按钮时,我们不希望还能回溯到登录页,这时候需要删除登录页的历史记录。这时,我们只需要添加以下代码:
//前往首页
this.navCtrl.push(HomePage, {
})
.then(() => {
const startIndex = this.navCtrl.getActive().index - 1;
console.log(startIndex)
this.navCtrl.remove(startIndex, 1);
});
3. 跨页面数据通信
主要使用事件机制。比如假设接口返回登录态失效,我们需要跳转到登录页。但由于已经把http相关功能抽象到专门的网络接口处理模块了,而作为一个Injectable模块不能直接处理NavController的跳转,否则会报错,这主要是为了保证数据层和具体处理逻辑的分离。这时候我们使用事件的方式来进行通知:
import { Events } from 'ionic-angular';
@Injectable()
export class HttpService {
...
private event: Event,
...
}
this.events.publish('token:expired', Date.now());
然后在具体的业务页面接收事件并作出相应处理:
constructor(public navCtrl: NavController,
public events: Events,
public app: App,
public navParams: NavParams) {
events.subscribe('token:expired', (timestamp)=>{
this.navCtrl.push(LoginPage);
})
}
值得注意的是,这里不需要在每个页面添加这个逻辑,否则会跳转多次,也就是说事件会向所有页面广播。