导航

有关导航的更多深入信息，请参阅Nav API参考。

导航是用户在应用中不同页面之间移动的方式。 Ionic的导航遵循标准本地导航概念，如iOS中的导航概念。 为了实现类似原生的导航，我们已经构建了一些新的导航组件，这对于使用传统桌面浏览器导航的开发人员来说可能会有所不同。

有几种方法可以在整个Ionic应用程序中导航：

基础导航

导航通过<ion-nav>组件来处理，该组件作为一个简单的堆栈，新的页面被推到并弹出，对应于历史上向前和向后移动。

我们从加载Nav组件的根页面开始：

import {StartPage} from 'start'

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
  // First page to push onto the stack
  rootPage = StartPage;
}

接下来，我们可以通过将导航控制器注入我们的任何页面来访问导航到的每个页面中的导航控制器。 请注意，页面组件不需要选择器。 Ionic自动添加。

@Component({
  template: `
  <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) {
  }
}

要从一个页面导航到另一个页面，只需将新页面推入或弹出到堆栈中即可：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Login</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>
    <button (click)="goToOtherPage()">
      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);
  }
}

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

如果您的页面有<ion-navbar>，如果不是根页面，则后退按钮将自动添加到其中，导航栏的标题将被更新。

或者，如果你想回去，但没有一个NavBar，你可以弹出当前页面的堆栈：

@Component({
  template: `
  <ion-content>
    <button (click)="goBack()">
      There's no place like home
    </button>
  </ion-content>`
})
class OtherPage {
  constructor(public navCtrl: NavController) {}

  goBack() {
    this.navCtrl.pop();
  }
}

有关基本导航的更多信息，请查看Nav API参考。

从根组件导航

如果你想控制从你的根应用程序组件导航怎么办？ 您不能注入NavController，因为导航控制器的任何组件都是根组件的子项，因此无法注入。

通过向ion-nav添加引用变量，您可以使用@ViewChild获取Nav组件的一个实例，它是一个导航控制器（它扩展NavController）：

@Component({
  template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  @ViewChild('myNav') nav
  rootPage = TabsPage;

  // Wait for the components in MyApp's template to be initialized
  // In this case, we are waiting for the Nav identified by
  // the template reference variable #myNav
  ngAfterViewInit() {
    // Let's navigate from TabsPage to Page1
    this.nav.push(LoginPage);
  }
}

标签导航

导航可以嵌套在复杂组件（如Tabs）中。 与传统的路由系统不同，Ionic的导航可以轻松地从应用中的任何位置导航到给定的页面，而无需指定特定的路由。 要在iOS上使用App Store应用程序作为示例，我们可以轻松导航到AppDetailPage，显示来自任何选项卡的特定应用程序的信息（请尝试查看！）。 有关如何轻松实现此更多信息，请查看Tabs文档。

效果：