Ionic 3: Passando valores entre as páginas

Thiago S. Adriano
Comunidade XP
1 min readMay 4, 2018

--

Dando continuidade ao meu artigo anterior: Criando um projeto do zero com rotas, hoje irei demonstrar como passar dois valores através de parâmetros para uma página em um projeto desenvolvido com Ionic 3.

Com o projeto desenvolvido no artigo anterior aberto no seu editor de textos, atualize os arquivos: home.ts, home.html e sobre.ts com os trechos de código abaixo:

En home.html eu removi o link e adicionei um evento de click.

<button ion-button (click)="pushPage()">Sobre</button>

Em home.ts eu criei uma função que irá passar um parâmetro id e um outro chamado name para a página Sobre:

pushPage() {
this.navCtrl.push(SobrePage, {
id: "123",
name: "Carl"
});
}

Por fim em sobre.ts eu estou recebendo os dados no meu controller e passando para dois consoles:

constructor(public navCtrl: NavController, public navParams: NavParams) {
let id = navParams.get('id');
let name = navParams.get('name');
console.log(id);
console.log(name);
}

Agora execute o projeto e note os valores sendo printados no console do seu navegador. Abaixo você tem uma imagem demonstrando esse passo:

passando valores entre as páginas (Ionic 3)

Esse foi um post rápido para demonstrar com esse passo é simples ;) Espero ter ajudado e até a próxima pessoal ;)

--

--