在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中从一个页面导航到另一个

回答

相关问题