【翻译】【Ionic3】模态框介绍

本文介绍翻译了模态框的一些基础知识，原网页点击这里

slide in off to a UI, often used for login or pages, , and .

For more , 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);//创建新的页面——ModalPagemodal.present();//页面展示}
}

导航

For more in depth on , see the Nav API .

如果要看更深的导航信息，请参见相关 API文档；

is how users move pages in your app. Ionic’s , like those in iOS. In order to -like , we’ve built a few new that might feel for used to .

是教用户如何在app的不同的页面移动的；Ionic的导航，和IOS一样，遵循标准的本地导航概念；为了能够本地化导航，我们建立了一些新的导航元件，这可能对习惯了传统桌面浏览器开发者来说会有点不同；

There are ways to an Ionic app:

这里有几种通过Ionic app来导航的方式；

Basic

基本导航

is the , which works as a stack that new pages are onto and off of, to and in .

导航通过 元件来控制，这个元件像一个简单的堆栈：新的页面push onto上来或者 off下去，为了响应前进或者历史记录中的后退；

1、We start with a root page that loads the Nav :

我们开始一个加载Nav 元件的根页面：

import {StartPage} from 'start'@Component({template: ''
})
class MyApp {// First page to push onto the stackrootPage = StartPage;//rootPage表示的是根页面；
}

2、Next, we can the in each page that is to by it into any of our Pages. Note that Page does not need a . Ionic adds these .

接着，我们可以连接每个页面的被注入到任何一个页面导航的 控制器。注意：页面元件不需要一个页面选择器。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 from one page to 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 inthis.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!`
})
class OtherPage {}