Como passar parâmetros para outra tela com Ionic

Recentemente precisei criar uma página de busca no meu app criado com Ionic. Mas o resultado da minha busca não ficaria nessa página, mas em outra página então precisei mandar para o construtor da outra página alguns valores.

Eu estou usando Ionic 4 então quase não encontrei conteúdo sobre o assunto. Então resolvi compartilhar com vocês como é feito.

Essa solução foi introduzida no Angular 7.2

Vamos usar o state para passar um objeto, você pode passar qualquer tipo de objeto por parâmetro. A estrutura do projeto está separado em duas telas. Uma de detalhes e outra que é aonde está o filtro.

import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
 
@Component({
  selector: 'app-filter',
  templateUrl: 'filter.page.html',
  styleUrls: ['filter.page.scss'],
})
export class FilterPage {
 
  valorParaEnviar = {
    name: 'Micael Pereira',
    website: 'micaelpereira.com.br',
    Angular: {
      version: 7,
      year: 2019
    },
    Libs: [
      'Vue', 'React', 'Jquery'
    ]
  };
 
  constructor(private router: Router, private dataService: DataService) { }
 
  enviarInfosViaState() {
    let navigationExtras: NavigationExtras = {
      state: {
        valorParaEnviar: this.valorParaEnviar
      }
    };
    this.router.navigate(['feed'], navigationExtras);
  }
}

O código anterior é o meu .ts referente a página de filtro.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-feed',
  templateUrl: './feed.page.html',
  styleUrls: ['./feed.page.scss'],
})
export class FeedPage implements OnInit {

  data: any;

  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      let getNav = this.router.getCurrentNavigation();
      if (getNav.extras.state) {
        this.data = getNav.extras.state.valorParaEnviar;
      }
    });
  }

  ngOnInit() { }
}

No segundo temos o código para pegar o valor que foi enviado.

Podendo assim trabalhar com o valor de diferentes formas. passando para um serviço para fazer o get em um servidor com os parâmetros.

Quer aprender mais de ionic, indico esse curso: http://bit.ly/2VdoFlY