ionic2 如何将输入数据获取到其他页面

Question

我想知道如何在主页中获取{this.username}到ListPage页面

我收到错误>> EXCEPTION: Error in ./HomePage class HomePage - inline template:16:8 caused by: this.navParams.get is not a function

很抱歉，我的英语不好。T^T 提前感谢您的帮助

首页.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>

首页

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));
}
}

列表页.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')
      );
     }
     }

Answer 1

将this.nav.push(ListPagePage, (this.username));更改为

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

然后通过更改this.username = this.navParams.get(this.username);来获取它自：

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

然后，您所做的基本上是在NavParams中发送一个名为"用户名"的对象。然后，NavParams 可以通过调用将返回值集的.get('username);来检索名称"用户名"的值。

编辑在您的代码中发现了相当多的错误，我不明白您为什么要这样做。试试这段代码：（保持html文件相同）

List-page.ts：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import 'rxjs/add/operator/map';
import {Http} from '@angular/http';
@Component({
  selector: 'page-list-page',
  templateUrl: 'list-page.html',
})
export class ListPagePage {
public foundRepos : any
username: any;
  constructor(navParams: NavParams,
              public http: Http,
              public nav: NavController) {
    this.username = navParams.get('username');
    // no need for this assignment --> if you declare http public in constructor, it's already accessible by `this.http`
    // 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')
      );
     }
}

和主页：

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});
     }
}