ionic2他のページ

Question

への入力データを取得するためにどのように私が知りたいのですが、ListPagePage

にホームページで{this.username}を取得し、私はエラー>>EXCEPTION: Error in ./HomePage class HomePage - inline template:16:8 caused by: this.navParams.get is not a function

ので、申し訳ありません私は」取得する方法私はいい英語です。 T^Tはあなたの助け

home.html

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     GitHub 
    </ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
    <ion-list inset> 
     <ion-item> 
      <ion-label>Search</ion-label> 
      <ion-input [(ngModel)]="username" type="text"></ion-input> 
</ion-item> 
</ion-list > 
    <div padding> 
     <button ion-button block (click)="changePage()">Search</button> 
    </div> 
</ion-content> 

home.ts

import { Component } from '@angular/core'; 

import { NavController, NavParams} from 'ionic-angular'; 
import { ListPagePage } from '../list-page/list-page'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 


    public username; 
public foundRepos; 
public repos; 

    constructor(
       private nav: NavController, 
       private navParams :NavParams) { 

    } 


changePage(username){ 
    console.log(this.username); 
    this.nav.push(ListPagePage, (this.username)); 
} 

} 

リスト-page.html

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     GitHub 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
<ion-list> 
    <ion-item *ngFor="let item of foundRepos" (click)="itemClicked($event,item)"> 


     <h2> {{ item.name }}</h2> 
     <p> {{ item.description }}</p> 
    </ion-item> 

    </ion-list> 
</ion-content> 

リストページに事前にありがとうございます。 ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { HomePage } from '../home/home'; 
import 'rxjs/add/operator/map'; 
import {Http} from '@angular/http'; 

@Component({ 
    selector: 'page-list-page', 
    templateUrl: 'list-page.html', 

}) 
export class ListPagePage { 

static get parameters() { 
    return [[NavController], [NavParams],[Http]]; 
    } 

public foundRepos : any 
username: any; 

    constructor(public navParams: NavParams, 
       public http: Http, 
       public nav: NavController, 
       public homepage : HomePage) { 

    this.navParams = navParams; 
    this.username = this.navParams.get(this.username); 
    this.http = http; 
    this.http.get("https://api.github.com/users/${this.username}/repos") 
    .subscribe(data => { 
      this.foundRepos = data.json(); 
     }, 
     err => console.error(err), 
    () => console.log('getRepos completed') 
    ); 
    } 
    } 

その後、

this.nav.push(ListPagePage, {username: this.username});

から

Answer 1

変更this.nav.push(ListPagePage, (this.username));とにthis.username = this.navParams.get(this.username); を変更することにより、それを得る：あなたはその後、基本的に "の名前を持つオブジェクトを送信してやっていること

this.username = this.navParams.get('username');

あなたのNavParamsに「username」と入力します。次に、NavParamsは、.get('username);を呼び出すことで、名前の「username」の値を取得できます。この値は、設定された値を返します。

編集あなたのコードや事柄にかなりの誤りがあります。あなたがそれらをやっている理由がわかりません。 「例外を

import { Component } from '@angular/core'; 

import { NavController, NavParams} from 'ionic-angular'; 
import { ListPagePage } from '../list-page/list-page'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

     public username; 
     public foundRepos; 
     public repos; 

     constructor(
       private nav: NavController, 
       private navParams :NavParams) { 

     } 

    // removed parameter since you don't call it with one in your html file. 
    changePage(){ 
     console.log(this.username); 
     this.nav.push(ListPagePage, {username: this.username}); 
    } 

}