在ionic2中從一個頁面導航到另一個頁面

Question

我在html文件中使用show（）從一個頁面導航到另一個頁面，這在下一頁很順利，但顯示錯誤co.show不是一個函數。 請查看附帶的截圖。

 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Http } from '@angular/http'; import {Nextpage} from '../../pages/nextpage/nextpage'; import 'rxjs/add/operator/map'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { posts:any; constructor(public navCtrl: NavController, public http: Http) { this.navCtrl=navCtrl; this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe( response => { this.posts = response.data.children; console.log(this.posts); }, err => { console.log("Oops!"); }); function show(){ this.navCtrl.push(Nextpage); } } } 

 <ion-header> <ion-navbar color="color1"> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content > <ion-slides style="max-height:250px! Important; max-width: 100%! Important;" autoplay="5000" loop="true" speed="3000"> <ion-slide > <img src="../../assets/img/seven.png"> </ion-slide> <ion-slide > <img src="../../assets/img/seven.png"> </ion-slide> <ion-slide > <img src="../../assets/img/seven.png"> </ion-slide> </ion-slides> <ion-list class="family-icon-scroller"> <ion-list-header> <b>Recent Activities</b> </ion-list-header> <ion-item (click)="show();" class="family-icon" *ngFor="let post of posts"> <img [src]="post.data.url" /> <p style="text-align:center; padding-top:1.5%;">{{post.data.author}}</p> </ion-item> </ion-list> <ion-list class="family-icon-scroller"> <ion-list-header> <b>Samples</b> </ion-list-header> <ion-item class="family-icon" *ngFor="let post of posts"> <img [src]="post.data.url" /> <p style="text-align:center; padding-top:1.5%;">{{post.data.author}}</p> </ion-item> </ion-list> <ion-list class="family-icon-scroller"> <ion-list-header> <b>Practice tests</b> </ion-list-header> <ion-item class="family-icon" *ngFor="let post of posts"> <img [src]="post.data.url" /> <p style="text-align:center; padding-top:1.5%;">{{post.data.author}}</p> </ion-item> </ion-list> <!--- today https://www.reddit.com/r/gifs/new/.json?limit=10 <div class="myBackground"> <h5 class="title" style="padding-left:2%;" >Recent Activities</h5> <ul class="family-icon-scroller"> <li (click)="Showpage();" class="family-icon" ><img src="../../assets/img/Grammar.jpg" /></li> <li (click)="showpage();" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li (click)="showpage();" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li (click)="showpage();" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> <li ui-sref="next" class="family-icon"><img src="../../assets/img/Grammar.jpg" /></li> </ul> </div> <div class="myBackground"> <h5 class="title" style="padding-left:2%;">Courses</h5> <ul class="family-icon-scroller"> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> <li class="family-icon"><img ng-src="img/Grammar8.jpg" /></li> </ul> </div> <div class="myBackground"> <h5 class="title" style="padding-left:2%;" >Practice tests</h5> <ul class="family-icon-scroller"> <li class="family-icon"><img ng-src="img/test1.jpg" /></li> <li class="family-icon"><img ng-src="img/test1.jpg" /></li> <li class="family-icon"><img ng-src="img/test1.jpg" /></li> <li class="family-icon"><img ng-src="img/test1.jpg" /></li> <li class="family-icon"><img ng-src="img/test1.jpg" /></li> <li class="family-icon"><img ng-src="img/test1.jpg" /></li> </ul> </div> --> </ion-content> 

我還在app.module.ts文件中輸入了nextpage。 不知道我哪里出錯了。

Answer 1

您的問題是您在構造函數中定義了函數。

export class HomePage {
posts:any;

  constructor(public navCtrl: NavController, public http: Http) {
   //you dont need to reinitialize navCtrl here since you injected using access specifier.      
   this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe(
    response => {
        this.posts = response.data.children;
        console.log(this.posts);
    },
    err => {
        console.log("Oops!");
    });
 }
//should be here
 show(){
    this.navCtrl.push(Nextpage);
    }
  }

有關打字稿類的更多信息:( docs）

旁注 ：做生命周期中的http調用（如ngOnInit而不是構造函數）總是更好。

Answer 2

你必須將你的函數放在構造函數之外

你必須聲明你的功能：

show(){
  this.navCtrl.push(Nextpage);
}

如果您使用：

function show(){
      this.navCtrl.push(Nextpage);
    }

你會收到這個錯誤：

意外的標記。 期望構造函數，方法，訪問器或屬性。

Answer 3

在app.module組件中聲明nextpage並嘗試。