如何在 ionic 2 中将一页移动到另一页？答案

【问题标题】：How to move one page to another page in ionic 2?如何在 ionic 2 中将一页移动到另一页？
【发布时间】：2018-02-24 19:12:57
【问题描述】：

我正在尝试使用ionic 2 从一个页面导航到另一个页面。

我正在学习 https://ionicframework.com/docs/v2/api/navigation/NavController/

export class ApiDemoPage {
  constructor(public navCtrl: NavController){
    alert('contr');
  }
  clickMe(){
    alert('---')
  }
}


@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
  root = ApiDemoPage;
}

@Component({
  template: '<p>hello</p>'
})
export class secondPage {
}

这是我的代码

https://plnkr.co/edit/5eDjTOtNu46liZHiuHdG?p=preview

收到此错误 (SystemJS) 错误：无法解析 ApiDemoPage 的所有参数：(?).(...)

【问题讨论】：

标签： angular ionic2

【解决方案1】：

您想使用 ionic 2 从一个页面导航到另一个页面。这很简单。您应该使用 NavController 并逐步进行操作。

创建两个页面“StartPage”和“OtherPage”。
在文件 StartPage.ts 上，您导入页面 about 并将 NavController 注入到构造函数中，然后将事件导航到其他页面。

例如：

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

   <ion-content>
     <button ion-button (click)="pushPage()">
       Go to OtherPage
     </button>
   </ion-content>
   `
})
 export class StartPage {
  constructor(public navCtrl: NavController) {
  }

  pushPage(){
    // push another page on to the navigation stack
    // causing the nav controller to transition to the new page
    // optional data can also be passed to the pushed page.
    this.navCtrl.push(OtherPage);
  }
}

加油！

【讨论】：

有什么方法可以使用字符串来推送 navCtrl？我想将组件动态推送到离子导航控制器
我有一个选项卡布局，我想从一个选项卡导航到另一个选项卡。我怎样才能实现它？

【解决方案2】：

创建一个新页面使用语法

ionic g page FirstPage

此命令在包含html、scss和ts文件的页面中创建FirstPage文件夹

之后将此页面导入 app.module.ts 文件以及声明和 Entries 组件中

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    FirstPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    FirstPage
  ]

然后在 filename.ts 文件（要从其移至另一个页面的 .ts 文件）中导入 navcontroller 和新创建的页面并创建构造函数

import { NavController } from 'ionic-angular';
import { FirstPage} from '../first-page/first - page';

constructor(public nav:NavController){

}

然后创建一个函数，该函数使用 push 方法导航到联系人页面。

nextPage()
{
this.nav.push(FirstPage);
}

在filename.html中调用函数

<button ion-button color="secondary" (click)="nextPage()"> My First Page </button>

【讨论】：

【解决方案3】：

我怀疑您对alert 的使用不正确。

正确方式：(https://ionicframework.com/docs/v2/components/#alert)

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
}

showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }

但另一种快速检查的方法是使用console.log("Enter ApiDemoPage");

【讨论】：