Búsqueda de sitios web

html - ionic2 Cómo obtener datos de entrada en otra página


Me gustaría saber cómo obtener {this.username} en HomePage para ListPagePage

y obtengo el error >> EXCEPCIÓN: Error en ./HomePage clase HomePage - plantilla en línea:16:8 causado por: this.navParams.get no es una función

Lo siento mucho, no hablo bien inglés. T^T Gracias de antemano por tu ayuda

inicio.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>

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

}

lista-página.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>

lista-página.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')
      );
     }
     }

Respuesta #1

Cambia this.nav.push(ListPagePage, (this.username)); a

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

Y luego obténlo cambiando this.username=this.navParams.get(this.username); a:

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

Lo que estás haciendo entonces es básicamente enviar un objeto con el nombre 'username' en tus NavParams. Luego, los NavParams pueden recuperar el valor del nombre 'username' llamando a .get('username'); lo cual devolverá el valor establecido.

editar encontré bastantes errores en tu código y cosas que no entiendo por qué las estás haciendo. Prueba este código: (mantén los archivos html igual)

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

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

}