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; 
 
\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ファイルに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); 
    } 
    } 

より上のtypescriptですクラス：(docs)

サイドノート：ngOnInitようlifecyclehooksでHTTP呼び出しではなく、コンストラクタのような非同期操作を行うことは常に良いです。

Answer 2

あなたは、コンストラクタ

外にあなたの機能を配置する必要がありますそして、あなたは次のようにあなたの関数を宣言する必要があります：あなたが使用している場合

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

：

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

あなたは、このエラーが発生します。

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