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