how to reflect changes of component from one page to another

Question

I have on select-option control which will come in many pages so i have created one page and put that select-option in to that page and called that page in other pages. when i use this component in page 1 and the selected values reflect in page2 using inputs and outputs, but the changes made in page2 and on closing page2 the changes are not reflecting in page1, so can anyone help me to solve this? what i have done so far....

custom-nav-bar.html

<ion-toolbar>
  <ion-navbar primary>

        <ion-item text-wrap>
          <!-- <ion-label>Gaming</ion-label> -->

          <ion-select interface="popover" (ionChange)="onChange()" [(ngModel)]="choose">
            <ion-option [value]="cg" *ngFor="let cg of chArr;" >{{cg.fname}}</ion-option>
          </ion-select>

        </ion-item>
      </ion-navbar>
</ion-toolbar>

custom-nav-bar.ts

@Component({
  selector: 'page-custom-nav-bar',
  templateUrl: 'custom-nav-bar.html',
  inputs: ['chArr', 'choose'],//choose as input to get input from the pages for ngModel
  outputs: ['optionpageselection']
})
export class CustomNavBarPage {

  choose: any;
  optionpageselection: EventEmitter<string> = new EventEmitter<string>();

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CustomNavBarPage');
  }


  onChange() {
    console.log("onchange called in custNav")

    this.optionpageselection.emit(this.choose);

  }
}

page1

export class page1 {
      choose: any;

onChange(event) {
    this.choose = event;
    console.log("you have selected")
    console.log(this.choose);
  }
}

page1.html

<ion-header>

  <page-custom-nav-bar [chArr]="chArr" [choose]="choose" (optionpageselection)="onChange($event)" ></page-custom-nav-bar>
</ion-header>


<ion-content padding>
</ion-content>

page2.html

<ion-header>

  <page-custom-nav-bar [chArr]="chArr" [choose]="choose" (optionpageselection)="onChange($event)" ></page-custom-nav-bar>
</ion-header>

<ion-content>
</ion-content>

page2.ts

export class page2{
  chArr: any;
  choose: any;

constructor(public navCtrl: NavController,
    public navParams: NavParams, private storage: Storage,
    public alertCtrl: AlertController) {

    this.chArr = navParams.get('chArr');
    this.choose = navParams.get('choose');
    console.log('choose ' + this.choose);


  }
onChange(event) {
    this.choose = event;
    console.log("you have selected in page2")
    console.log(this.choose);
}
}

Answer 1

Parent

ionViewWillEnter() {
    this.myData = this.navParams.get('myDataKey') || null;
}

Child

ionViewWillLeave() {
    this.navCtrl.getPrevious().data.myDataKey = this.myData;
}