视图创建
当开发者往navigation stack里添加一个元素的时候,一个视图就会被创建出来。这个方法就是push()
,NavController
这个模块会通过@Component
创建一个class,并作为模块的第一个参数。NavCotroller模块会在之后编译这个component.并把这个component添加到app,并塞入视图中。
新增一个新页面,我们使用NavCotroller的push
方法,而某个被push的视图会接收到一个来自NavParams
class的数据。
我们分析一下下面这段代码:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OtherPage } from './other-page';
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button (click)="pushPage()"> /*在标签里自定义一个pushPage()的函数*/
Go to OtherPage
</button>
</ion-content>
`
})
export class StartPage {
constructor(public navCtrl: NavController) {//引入NavContoller模块
}
pushPage(){
this.navCtrl.push(OtherPage, { //push()方法的第二个参数是一个对象,这个对象就是传递给OtherPage的参数,而第一个参数就是我们要加载的新页面。
id: "123",
name: "Carl"
});
}
}
------------------------------割了-----------------------------------
import { NavParams } from 'ionic-angular';
//我们引入NavParams模块,
@Component({ //创建的新组件,也就是一个新页面。
template: `
<ion-header>
<ion-navbar>
<ion-title>Other Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
constructor(private navParams: NavParams) { //接受来自NavParams模块传递来的参数
let id = navParams.get('id');
let name = navParams.get('name');
}
}
删除当前页面
删除比较简单只要调用NavCotroller模块中的pop()方法就可以直接删除。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Other Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
constructor(public navCtrl: NavController ){
}
popView(){
this.navCtrl.pop();
}
}