在本教程中,在Ionic 3/Angular中学习路由和导航。
Ionic 3使用导航堆栈实现页面之间的导航。
只有理解这两个堆栈概念,才能理解Ionic3导航系统:
导航到页面时,将页面推到堆栈顶部。
从页面导航时,将从堆栈顶部弹出页面。
你可以从这个维基百科链接了解更多关于堆栈数据结构的信息
从Ionic 3导航开始
NavController
组件公开了许多方法,因此你可以轻松控制导航堆栈,但NavController
不是导航的唯一可用组件,还有其他组件:
我们首先生成一个新的Ionic 3项目(基于空白模板),在终端或命令提示符中执行以下命令:
$ ionic start ionic-2-navigation blank
blank
模板只有一个页面,HomePage
,所以,先添加一些其他页面,然后浏览到project文件夹中,使用
$ cd ionic-2-navigation
$ ionic g page about
$ ionic g page contact
你需要将这两个页面添加到app.module.ts
,为此,只需打开src/app/app.module.ts
文件,并在导入后将两个页面添加到declarations
和entryComponents
数组。
import { NgModule, ErrorHandler
}
from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler
}
from 'ionic-angular';
import { MyApp
}
from './app.component';
import { HomePage
}
from '../pages/home/home';
import { AboutPage
}
from '../pages/about/about';
import { ContactPage
}
from '../pages/contact/contact';
@NgModule({
declarations: [
MyApp,
HomePage,
AboutPage,
ContactPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
AboutPage,
ContactPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler
}
]
}
)
export class AppModule {
}
使用NavController
现在我们准备添加一个简单的导航,添加代码,通过单击一些按钮,从主页导航到about或contact页面。
打开app/src/pages/home/home.ts
文件,并执行以下步骤:
gotoAbout()
和gotoContact()
导入两个页面组件:
import { AboutPage
}
from '../about/about';import { ContactPage
}
from '../contact/contact';
添加导航方法:
@Component({
selector: 'page-home',
templateUrl: 'home.html'
}
)
export class HomePage {
constructor(public navCtrl: NavController) {
}
public gotoAbout(){
this.navCtrl.push(AboutPage);
}
public gotoContact(){
this.navCtrl.push(ContactPage);
}
}
正如你可以看到的,使用push()
方法NavController
导航到另一个页面,该方法通过page构造函数注入,并且可以从this.navCtrl
对象获得。
要导航到另一个页面,首先导入,然后使用NavController
push方法,该方法将目标页面-组件作为参数。
打开src/pages/home/home.html
文件,并添加两个按钮
<button ion-button (click)="gotoAbout();">Go to about</button>
<button ion-button (click)="gotoContact()">Go to contact</button>
向about和contact页面添加back按钮,打开src/pages/about/about.ts
文件,并添加一个goBack()
方法:
goBack(){
this.navCtrl.pop();
}
然后将它绑定到相应组件视图中的按钮:
<button ion-button (click)="goBack()">Go back</button>
对联系人页面执行相同的操作。