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)

旁注：执行异步操作（例如ngOnInit等生命周期中的http调用而不是构造函数总是更好。

Answer 2

你必须把你的函数放在构造函数之外

你必须声明你的功能：

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

如果您使用：

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

您将收到此错误：

意外的令牌。构造函数，方法，访问器或属性是预期

Answer 3

在app.module组件中声明nextpage并尝试。

在ionic2中从一个页面导航到另一个页面

3 个答案: