如何将我点击的值传递给下一页

Question

I am new to ionic, and I have design an ionic application, I want to pass the first page value to the second page. I will attach 2 photo to explain it more clearly.

This is the first picture

First Page

Once I clicked the white box button on the first page, I want the icon to be appear on the second page like this.

Second Page

If I click Electricity on the first page, the icon on second page will show what I clicked on the first page, the icon what you see is I hard code it. I have no idea how to make it works, does anyone know how to make it works ?

This is my code for the first page button,

<ion-col col-6 style="text-align:center;" >
  <button ion-button (click)="problem()" class="divButtonBox">
   <ion-icon class="logo-flash" name="flash"></ion-icon>
  </button>
</ion-col>

Here is the TS for problem();

problem(){
  this.navCtrl.push(ProblemPage)  
}

Here is the code for viewing second page, I hard code it because I don't know how to pass the value or string.

<ion-col col-5 style="text-align:center;">
    <ion-icon name="flash" class="logo"></ion-icon>
</ion-col>

Answer 1

This is done using ionics NavController . You can simply add optional data to the push() call:

this.navCtrl.push(ProblemPage, {
  problemType: 'electricity'
});

And you can retrieve it on the ProblemPage like this using NavParams :

export class ProblemPage {
  public problemType;

  constructor(private navParams: NavParams) {
   this.problemType = navParams.get('problemType');
  }
}