Question

我正在使用Ionic 2以及带有详细信息箭头的可点击离子项列表：

<ion-item-group>
    <button ion-item (click)="onWhenItemClick()">
      Quand
      <ion-note item-end>{{ date }}</ion-note>
    </button>
    <button ion-item (click)="onWhereItemClick()">
      Où
      <ion-note item-end>{{ location }}</ion-note>
    </button>
  </ion-item-group>

由于有这个箭头，我希望（作为用户）在点击这些项目时看到从右到左滑动的新页面。

为了您的信息，每个离子项应该带我到一个只显示广播项目列表的页面。

我想重新创建与select或modeal相同的机制，但是有一个页面。

所以基本上我想推送一个新页面（简单）并能够弹出/关闭它并使用像onDismiss（）这样的函数处理这个解雇。

你会怎么做？推送新页面不是

Answer 1

没有事件可以将数据传回页面，并且没有看到任何关于他们实现此功能的消息或任何新闻，你真的需要创建模态而不是简单地推送页面。 / p>

在页面上导入modal并将其添加到构造函数中并执行以下操作

onWhereItemClick(){
  let modal = this.modalCtrl.create('YourPage');
  modal.onDidDismiss(data => {
    // HANDLE THE DATA YOU WANT TO PASS BACK
  });
  modal.present();
};

然后，在YourPage您导入ViewController，将其添加到构造函数中，然后

dismissModal(){
  let myData = ''; // THIS IS THE CONTENT YOU WANT TO PASS BACK
  this.viewCtrl.dismiss(myData);
};

通过此功能，您可以将数据发送回您的网页并进行处理。

希望这有帮助。

修改

解决方法是在localStorage中保存您的解雇数据或以其他方式保存它，然后当用户返回到您获得它的页面时，如下所示：

你的页面

ionViewWillEnter(){
  this.storage.get('dataYouWant').then(data =>{
    if(data){
      // HANDLE DATA
    }
  });
}

ionViewWillLeave(){
  this.storage.remove('dataYouWant');
  // REMOVE THE DATA SO IF YOU COME BACK TO THIS PAGE FROM ANOTHER WAY IT DOESN'T LOAD DATA YOU DON'T WANT
};

推送页面

ionViewWillUnload(){
  this.storage.set('dataYouWant', dataYouWant);
  // SAVE DATA YOU WANT TO USE
}

当第二页要卸载它时，将数据保存在localStorage上以便在第一页中使用。如果出现任何并发问题，您可以尝试在第一页上使用ionViewDidEnter()而不是ionViewWillEnter()

Answer 2

要转到您需要使用的新页面，

navCtrl.push(PageName)

与推送一起发送数据

navCtrl.push(PageName,{Param1:"your data"})

要从其他页面检索推送的数据，

navParams.get("Param1")

在您的情况下，您可以在推送页面的同时传递一些数据，

onWhenItemClick(itemData){
  this.navCtrl.push(PageName,{Param1:itemData)
}

并从其他页面检索您的数据

Answer 3

我建议你看看这个神奇的教程https://www.joshmorony.com/passing-data-between-pages-in-ionic-2/

Answer 4

你想要使用Ionic的navController。它的行为非常像堆栈，您可以将新视图压入堆栈，然后将其弹出以“返回”

所以要导航到新页面

navCtrl.push(myComponent)

然后返回，您将使用

从堆栈中删除该视图

navCtrl.pop()

您还可以使用navCtrl.popToRoot()一直跳回到根视图控制器

请在https://ionicframework.com/docs/api/navigation/NavController/

上查看他们的文档，了解更多示例和信息

单击离子项并检索数据时如何推送新页面

4 个答案:

修改