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

Question

我想知道如何将主页中的 {this.username} 获取到 ListPagePage

我得到错误 >> 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>

首页.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));
}

}

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

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('用户名');

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

edit 在您的代码中发现了很多错误以及我不明白您为什么要这样做的事情。试试这个代码:(保持 html 文件相同)

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

和 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 ) {

       }

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

}