src/pages/home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="onGoToUsers()">Users</button>
</ion-content>
src/pages/home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UsersPage } from '../users/users';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
onGoToUsers() {
this.navCtrl.push(UsersPage);
}
}
src/pages/users/users.html
<!--
Generated template for the UsersPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>The users</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="onLoadUser('Max')">User 'Max'</button>
<hr>
<button ion-button (click)="onLoadUser('Anna')">User 'Anna'</button>
</ion-content>
<ion-footer>
<p>The Footer</p>
</ion-footer>
src/pages/users/users.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { UserPage } from './user/user';
/**
* Generated class for the UsersPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-users',
templateUrl: 'users.html',
})
export class UsersPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
onLoadUser(name:string) {
this.navCtrl.push(UserPage, { userName:name });
}
}
src/pages/users/user/user.html
<ion-header>
<ion-navbar>
<ion-title>{{ name }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Hi I'm {{ name }}</p>
</ion-content>
src/pages/users/user/user.ts
import { Component } from "@angular/core";
import { NavParams } from 'ionic-angular';
@Component({
selector: 'page-user',
templateUrl: 'user.html'
})
export class UserPage {
name:string;
constructor(private navParams: NavParams) { }
ngOnInit() {
this.name = this.navParams.get('userName');
}
}
and ERROR you can see this picture.