Il metodo push e i suoi parametri

Come abbiamo visto il metodo push() serve a portare in evidenza una certa view ma anche a stabilire quale contenuto visualizzare. Per farlo possiamo passare al metodo due parametri:

goToNews(news: News) {
 	this.navCtrl.push(NewsPage, news);
}

Abbiamo passato due parametri al metodo push(): il primo rappresenta la pagina verso cui navigare, il secondo consente di passare dei valori alla nuova pagina. A questo punto, modifichiamo il codice della pagina NewsPage in modo da recepire i dati della notizia da visualizzare.

Per prima cosa definiamo una proprietà news per il componente NewsPage; quindi iniettiamo nel costruttore il servizio NavParams che ci consente di accedere ai parametri passati alla pagina e di assegnarli alla proprietà news. Tradotto in codice otterremo quanto segue:

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
import {News} from '../../components/news/news'; 
@Component({
	selector: 'page-news-page',
	templateUrl: 'news-page.html'
})
export class NewsPage {
	news: News;
	constructor(navParams: NavParams) {
		this.news = navParams.data;
	}
}

Come possiamo vedere, NavParams ci consente di accedere al valore passato come secondo parametro del metodo push() tramite la proprietà data. Nel nostro caso assegniamo il valore del parametro direttamente alla proprietà news del componente NewsPage.

A questo punto non ci resta che specificare nel template del componente NewsPage il binding dei dati della notizia, come mostra il seguente markup:

<ion-header>
	<ion-navbar>
		<ion-title>{{news.title}}</ion-title>
	</ion-navbar>
</ion-header> 
<ion-content padding>
	<div>
		<img src="{{news.imageUrl}}">
		<h1>{{news.title}}</h1>
		<p>{{news.date | date: 'dd/MM/yyyy'}}</p>
		<div>
			<p>
				{{news.text}}
			</p>
		</div>
	</div>
</ion-content>

In questo modo la pagina NewsPage visualizzerà i dettagli della notizia selezionata dall'utente, come nell'esempio mostrato dalla figura seguente:

Nell'esempio appena descritto abbiamo passato al metodo push() un secondo parametro che rappresenta un dato da passare alla pagina di destinazione. Ma come fare per passare più parametri alla pagina di destinazione? In generale possiamo passare come secondo parametro di push() un qualsiasi valore. Quindi per passare più parametri alla pagina di destinazione, possiamo specificare un oggetto letterale con le proprietà che rappresentano i diversi parametri. Vediamo un esempio di chiamata in cui passiamo due parametri usando un oggetto letterale con due proprietà:

this.navCtrl.push(newPage, { id: 123, codice: "abc"});

Nella pagina di destinazione possiamo accedere distintamente ai due parametri utilizzando il metodo get() di NavParams, come mostrato di seguito:

var id = navParams.get("id");
var codice = navParams.get("codice");

Da notare come i nomi dei singoli parametri vengono passati al metodo get() sotto forma di stringa.