ionic2 如何獲取其他頁面的輸入數據

Question

我想知道，如何將 HomePage 中的 {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));
}

}

列表頁.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>

列表-page.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(this.username); 到：

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

然后你所做的基本上是在你的 NavParams 中發送一個名為“用戶名”的對象。 然后 NavParams 可以通過調用.get('username);來檢索名稱 'username' 的值.get('username); 這將返回設置的值。

編輯在您的代碼中發現了很多錯誤，我不明白您為什么要這樣做。 試試這個代碼：（保持 html 文件相同）

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

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

}