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

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})
}