在第二页使用第一页的数据

Question

我有一个简单的应用程序，当有人单击列表元素时，会启动一个新页面，其中包含所单击的列表元素的文本。

所以我希望将 device 变量传递给名为 deviceDetails 的页面

<ion-list>
  <ion-item *ngFor="let device of devices" (click)="showDevice(device)">
    <ion-item>
      {{ device }}
      <!-- Whaetver device is clicked I want it to be in the ion-title on page 2 -->
    </ion-item>
  </ion-item>
</ion-list>

我认为我应该在showDevice() 方法中使用navController 传递数据，但我不知道this.nav.push(deviceDetails,device); 是否有效，因为我不知道如何在deviceDetails 页面中获取数据。任何想法如何解决这个问题？

捕获数据的类

export class DevicePage {
  device: string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.device = navParams.get("deviceName");
    console.log(this.device);
  }

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

}

@santosh singh 在聊天中向我解释说，我必须将 deviceName 作为这样的对象发送。

showDevice(deviceName) {
  console.log(deviceName);
  this.navCtrl.push(DevicePage, { 'deviceName': deviceName });
}

Answer 1

您可以在devicedetails页面上获取数据，如下所示

 export class DeviceDetails{
    constructor(navParams: NavParams){
        this.deviceName= navParams.get("deviceName");

    }
}

在showDevice方法中

showDevice(devinceName){
      this.nav.push(DeviceDetails,{'deviceName':deviceName})
}