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

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

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 {}

欢迎关注我的公众号：
【幕桥社区】