angular – 如何在离子2中将一页移动到另一页？

发布时间：2020-12-17 17:02:09 所属栏目：安全来源：网络整理

导读：我试图使用离子2从一个页面导航到另一个页面. 我正在学习 https://ionicframework.com/docs/v2/api/navigation/NavController/ export class ApiDemoPage { constructor(public navCtrl: NavController){ alert('contr'); } clickMe(){ alert('---') }}@Comp

我试图使用离子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的所有参数：(？).(…)

解决方法

您希望使用离子2从一个页面导航到另一个页面.它很简单.您应该使用NavController并按步骤进行操作.

>创建两个页面“StartPage”和“OtherPage”.
>在文件StartPage.ts上,导入页面并将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);
  }
}

欢呼！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!