如何反映组件从一个页面到另一个页面的更改

Question

我有一个选择选项控件，它将出现在许多页面中，所以我创建了一个页面并将该选择选项放入该页面并在其他页面中调用该页面。 当我在第 1 页中使用此组件并且所选值使用输入和输出反映在第 2 页中时，但在第 2 页和关闭第 2 页时所做的更改不会反映在第 1 页中， 那么谁能帮我解决这个问题？到目前为止，我做了什么....

自定义导航栏.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);
  }
}

页1

export class page1 {
      choose: any;
onChange(event) {
    this.choose = event;
    console.log("you have selected")
    console.log(this.choose);
  }
}

页1.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>

页2.html

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

第 2 页

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

父级

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

孩子

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

Answer 2

另一种方法是使用存储模块。

custom-nav-bar.ts

onChange() {
    this.storage.set('choose', this.choose);//you can retrive this value from anywhere
  }

第 2 页

ionViewDidEnter(){
    this.storage.get('choose').then((val) => {
        let choose = val;
      });
}