本文介绍翻译了模态框的一些基础知识,原网页点击这里
Modals slide in off screen to display a temporary UI, often used for login or signup pages, message composition, and option selection.
For more information, Check out the API docs.
模态框划入屏幕来展示一个暂时的UI界面,经常用作登录或者注册页面。信息构架和操作选择;如果需要更多信息,请参见API 文档
一、基本使用:
import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';
export class MyPage {
constructor(public modalCtrl: ModalController) {
//构造控制器
}
presentModal() {
let modal = this.modalCtrl.create(ModalPage);//创建新的页面——ModalPage
modal.present();//页面展示
}
}
Navigation
导航
For more in depth information on navigation, see the Nav API reference.
如果要看更深的导航信息,请参见相关Navicat API文档;
Navigation is how users move between different pages in your app. Ionic’s navigation follows standard native navigation concepts, like those in iOS. In order to enable native-like navigation, we’ve built a few new navigation components that might feel different for developers used to traditional desktop browser navigation.
Navigation是教用户如何在app的不同的页面移动的;Ionic的导航,和IOS一样,遵循标准的本地导航概念;为了能够本地化导航,我们建立了一些新的导航元件,这可能对习惯了传统桌面浏览器开发者来说会有点不同;
There are several ways to navigate throughout an Ionic app:
这里有几种通过Ionic app来导航的方式;
Basic Navigation
基本导航
Navigation is handled through the component, which works as a simple stack that new pages are pushed onto and popped off of, corresponding to moving forward and backward in history.
导航通过<ion-nav>
元件来控制,这个元件像一个简单的堆栈:新的页面push onto上来或者popped off下去,为了响应前进或者历史记录中的后退;
1、We start with a root page that loads the Nav component:
我们开始一个加载Nav 元件的根页面:
import {StartPage} from 'start'
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
// First page to push onto the stack
rootPage = StartPage;//rootPage表示的是根页面;
}
2、Next, we can access the Navigation Controller in each page that is navigated to by injecting it into any of our Pages. Note that Page components does not need a selector. Ionic adds these automatically .
接着,我们可以连接每个页面的被注入到任何一个页面导航的Navigation 控制器。注意:页面元件不需要一个selector页面选择器。Ionic 会自动添加他们;
@Component({
template: //template表示页面的html模板
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>Hello World</ion-content>`
})
export class StartPage {
constructor(public navCtrl: NavController) {
}
}
To navigate from one page to another simply push or pop a new page onto the stack:
为了导航能够从一个页面简单的push前进到或者pop回到堆栈上一个新的页面;
@Component({
template: //页面模板
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button (click)="goToOtherPage()">//html页面跳转到otherPage()
Go to OtherPage
</button>
</ion-content>`
})
export class StartPage {
constructor(public navCtrl: NavController) {}//导航控制器
goToOtherPage() {
//push another page onto the history stack
//causing the nav controller to animate the new page in
this.navCtrl.push(OtherPage);//navCtrl控制器
}
}
@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 {}
欢迎关注我的公众号:
【幕桥社区】