在离子2内容页面中添加按钮/菜单

Question

我正在学习离子2，作为学习过程的一部分，我正在创建一个基本的离子2应用程序。

以下是我的应用中的一个页面。我有一些文本内容，我想在应用程序的About页面中显示。最初只有标题必须可见，一旦用户点击标题，必须打开另一个带有文本内容的页面。

我如何实现这一目标？我的意思是，使用哪个组件？任何指导都会很棒。任何其他方法/建议实现这一点也是受欢迎的，我希望页面没有杂乱。

Answer 1

要从一个页面导航到另一个页面，您必须使用Ionic 2提供的navController。基本上Ionic 2中的所有导航都使用通过{抽象的 Stack 数据结构进行{1}}。这样，您可以使用

将页面推到其他页面之上

navController

现有的页面可以通过调用

从堆栈中弹出

.push(ClassNameOfThePageYouWantToPush,{paramsYouWantToPassToTheNewPage})

您可以找到更多信息here

要在UI中触发它，请使用（单击）处理程序来调用函数

.pop(ClassNameOfThePageYouWantToPush,{paramsYouWantToPassToTheNewPage})

在<ion-title (click)="openNextPage()">About</ion-title> 文件中，您可以导入navController并将其添加到构造函数中。

.ts

因为当您使用离子2 cli生成页面时，这是一个常见的功能

import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
  })
export class Page2 {
  constructor(public navCtrl: NavController) {
  }

  openNextPage(){
    this.navCtrl.push(PageYouWantToOpen);
  }
}

它会自动添加准备好使用的navController和navParams。