I’m passing the params between Pages using a Service with two methods: setNavData and getNavData
Page 1: recursos-bimestrais-search.page.ts
export class RecursosBimestraisBuscaPage implements OnInit {
private recurso: Recurso
private ano: number
private anos = [2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010]
private municipio: Municipio
private listaMunicipios: Municipio[]
private listaBimestres: Bimestre[]
constructor(
private router: Router,
private provider: RecursosBimestraisService,
public navCtrl: NavController,
private navParam: NavparamService,
// public modalCtrl: ModalController
) {
this.recurso = new Recurso()
}
ngOnInit() {
// ionViewWillEnter() {
var estado = new Estado(1, "PB")
this.provider.getMunicipiosByEstado(estado).then((municipios: Municipio[]) => {
this.listaMunicipios = municipios
});
}
showRecursosBimestraisInfo(bimestre: Bimestre) {
let parametros = {
municipio: this.municipio,
certificado: this.recurso.certificado,
bimestre: bimestre
};
this.navParam.setNavData(parametros)
this.router.navigate(['tabs/recursos-bimestrais-detalhes']);
}
async municipioSelecionado() {
this.recurso = undefined
this.listaBimestres = undefined
this.ano = 2019
await this.provider.getRecursosByMunicipio(this.municipio).then((recurso: Recurso) => {
this.recurso = recurso
this.listaBimestres = this.recurso.bimestres.filter((bimestre) => {
return bimestre.ano == this.ano
})
})
}
anoSelecionado() {
this.listaBimestres = this.recurso.bimestres.filter((bimestre) => {
return bimestre.ano == this.ano
})
}
}
Page 1 : recursos-bimestrais-search.page.html
<ion-content>
<div class="titulo">
<br>
<img src="../../assets/imgs/ezgif.com-gif-maker.png" width="55px" height="55px">
<h1>Fiscalizo</h1>
<p>Aqui você ira visualizar os recursos bimestrais que são repassados aos municípios</p>
</div>
<ion-card>
<ion-item class="search-select">
<ion-label style="color: black">Município</ion-label>
<ionic-selectable
item-content
closeButtonText="Cancelar"
[canSearch]="true"
[(ngModel)]="municipio"
itemTextField="municipio"
[items]="listaMunicipios"
(onChange)="municipioSelecionado()">
</ionic-selectable>
</ion-item>
<ion-item class="search-select">
<ion-label style="color: black">Ano</ion-label>
<ionic-selectable
item-content
closeButtonText="Cancelar"
[(ngModel)]="ano"
[items]="anos"
(onChange)="anoSelecionado()">
</ionic-selectable>
</ion-item>
</ion-card>
<ion-card *ngIf="listaBimestres?.length > 0">
<ion-card-header>
Bimestres
</ion-card-header>
<ion-list>
<ion-item *ngFor="let bimestre of listaBimestres" (click)='showRecursosBimestraisInfo(bimestre)'>{{bimestre.bimestre}}º bimestre</ion-item>
</ion-list>
</ion-card>
</ion-content>
Page 2: recursos-bimestrais-details.page.ts
export class RecursosBimestraisDetalhesPage implements OnInit {
municipio: Municipio
certificado: PrevidenciaCertificado
bimestre: Bimestre
data: any;
constructor(
private route: ActivatedRoute,
private router: Router,
public navCtrl: NavController,
private navParam: NavparamService
) {
this.data = this.navParam.getNavData();
}
ngOnInit() {
console.log(this.data.municipio, this.data.certificado, this.data.bimestre);
}
close() {
// this.navCtrl.navigateBack('tabs/recursos-bimestrais-busca');
this.navCtrl.navigateRoot('tabs/recursos-bimestrais-busca');
}
showPageNotificar(regularidade: Regularidade, tipo: string) {
let parametros = {
municipio: this.data.municipio,
bimestre: this.data.bimestre.bimestre,
ano: this.data.bimestre.ano,
regularidade: regularidade,
tipo: tipo,
certificado: this.data.certificado
}
this.navParam.setNavData(parametros)
this.router.navigate(['tabs/elogio-denuncia']);
}
}
Page 2: recursos-bimestrais-details.page.html
- It shows many details about the data that I selected at Page 1