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

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

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; 
 
\t \t console.log(this.posts); 
 
    }, 
 
    err => { 
 
     console.log("Oops!"); 
 
    }); 
 
\t 
 
\t function show(){ 
 
\t this.navCtrl.push(Nextpage); 
 
\t } 
 
} 
 
    }

<ion-header> 
 
    <ion-navbar color="color1"> 
 
    <ion-title>Home</ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
\t <ion-content > 
 
\t 
 
\t <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> 
 
\t 
 
\t 
 

 
    <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"> 
 
     
 
\t <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> 
 
\t <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> 
 

 
\t <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> 
 

 
\t <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> 
 
--> 
 

 
\t </ion-content>

我也曾在app.module.ts文件中所做的下一頁的條目。無法知道我錯在哪裏。

來源

2017-05-09 supriya chauhan

你需要t o顯示相關代碼[mcve] –

noo ..粘貼代碼不截圖..編輯成你的問題 –

http://stackoverflow.com/posts/43870165/edit –

你的問題是你定義的函數在的構造函數。

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)

旁註：它始終是更好地做異步操作，如在lifecyclehooks HTTP調用像ngOnInit，而不是構造函數。

來源

2017-05-09 13:03:02

啊我的壞..它不應該有關鍵字function..will編輯它 –

你必須把你的函數的構造

之外，你有一個像聲明你的功能：

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

如果你使用：

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

您將收到此錯誤：

Unexpected token. A constructor, method, accessor, or property was expected.

來源

2017-05-09 13:10:39

謝謝你...運行良好.. –

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

回答

相關問題