如何在另一个页面中显示弹出内容

Question

我单击"选择城市"时，单击它将弹出两个城市，一个是'bengaluru'，另一个是'hyderabad'，如果单击班加罗尔，它必须显示该名称而不是选择城市..

home.html：

<ion-header>
<button ion-button icon-only (click)="presentPopover($event)" >
    Choose City
    <ion-label>{{cityname}}</ion-label>
  <ion-icon name="arrow-dropdown"></ion-icon>
</button>
</ion-header>

home.ts：

import { PopoverController } from 'ionic-angular';

import { Component } from '@angular/core';
import {Popoverpage} from '../popoverpage/popoverpage';

@Component({
  selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {
  constructor(public popoverCtrl: PopoverController,
    ) {}
  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(Popoverpage);
    popover.present({
      ev: myEvent
    });
  }
}

popoverpage.ts：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';
import { Rest } from '../../providers/network/rest';
import { Logger } from '../../providers/logger/logger';
/*
  Generated class for the Popoverpage page.
  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  template: `
    <ion-list>
      <button ion-item (click)="store()">Bengaluru</button>
      <button ion-item (click)="fun()">Hyderabad</button>
    </ion-list>
  `
})
export class Popoverpage{
    store_id
  cityname

   constructor(public viewCtrl: ViewController,
     public params:NavParams,
    public navCtrl: NavController,
    public rest: Rest,
    public logger: Logger) {
   }
  store() {
    let  storeObj={
      store_id: '1'
    }
    this.logger.debug("checking the  " +JSON.stringify(storeObj));
    this.rest.post('/store',storeObj)
      .subscribe(result => {
        this.logger.debug("checking the data "+JSON.stringify(result));
        if(result.status == '1'){
          this.logger.info("success callback");
          // this.navCtrl.push("Homepage");
          this.params.get('cityname');
          //this.navCtrl.pop();
          this.viewCtrl.dismiss();
        }
        else{
          this.logger.info("error callback");
this.viewCtrl.dismiss();
        }
      })
  }
  fun() {
    let  storeObj={
      store_id: '0'
    }
    this.logger.debug("checking the  " +JSON.stringify(storeObj));
    this.rest.post('/store',storeObj)
      .subscribe(result => {
        this.logger.debug("checking the data "+JSON.stringify(result));
        if(result.status == '1'){
          this.logger.debug("success callback");
          this.params.get('cityname');
          //this.navCtrl.pop();
           this.viewCtrl.dismiss();
        }
        else{
          this.logger.debug("error callback");
           this.viewCtrl.dismiss();
        }
      })
  }
}

我该如何显示那个东西

Answer 1

您可以使用dismiss传递数据并在onDidDismiss中设置回调。在popoverpage.ts中：

let data= cityname;//the variable containing the data to return
this.viewCtrl.dismiss({'city':data});

在您的家中。TS

  let popover = this.popoverCtrl.create(Popoverpage);
  popover.onDidDismiss(data=>{
     this.selectedCity=data.city;
  });
 popover.present({
      ev: myEvent
    });