martes, 29 de agosto de 2017

ionic: Navigate from one page to another passing parameters

One page

onepage.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { UserPage } from './otherpage';

@Component({
  selector: 'page-one',
  templateUrl: 'one.html'
})
export class OnePage {

constructor (private navController: NavController) {

}

onLoad(someParameter: string) {
this.navController.push(OtherPage, {parameter1: someParameter});
}
}

onepage.html

<ion-header>

  <ion-navbar>
    <ion-title>One Page</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
<button ion-button (click)="onLoad('Value1')"> Value 1 </button>
<hr>
<button ion-button (click)="onLoad('Value2')"> Value 2 </button>
</ion-content>

Other page

otherpage.ts

import { Component } from '@angular/core';

import { NavParams } from 'ionic-angular';

@Component({
selector: 'page-other',
templateUrl: 'other.html'
})
export class OtherPage {
parameter: string;

constructor (private navParams: NavParams) {

}

ngOnInit() {
this.name = this.navParams.get('parameter1');
}
}

otherpage.html

<ion-header>
<ion-navbar>
<ion-title>{{parameter}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<p>{{parameter}}</p>
</ion-content>

Add onepage and other page to app.module.ts.

No hay comentarios:

Publicar un comentario