Ionic 3 modal navparams 返回 undefined答案

【问题标题】：Ionic 3 modal navparams returning undefinedIonic 3 modal navparams 返回 undefined
【发布时间】：2017-12-27 16:11:00
【问题描述】：

所以我试图将字符串作为参数传递给模态（特别是主/详细信息）并且模态确实打开，但字符串返回未定义。

这里是父 ts：

 editReminder(event, data){
    console.log(data);
    let myModal = this.modalCtrl.create(ReminderDetailsPage, data);
    myModal.present();
}

HTML 使用 ngFor（提醒提醒）显示提醒列表。这个方法在html上获取这样的字符串：

 <button ion-fab mini class="mini-button" (click)="editReminder($event, reminder)">
          <ion-icon name="create"></ion-icon>
 </button>

如果我是 console.log(data)，它会像往常一样向我返回提醒。但是当我尝试在 ReminderDetails 模式中获取它时：

export class ReminderDetailsPage {

   EditedReminder: string = this.navParams.get('data');

它只是返回未定义。我在两个页面上都导入了 navParams 并在构造函数中声明了它们。

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案1】：

在这种情况下，我建议您使用存储而不是使用 NavParams

【讨论】：

【解决方案2】：

在模态页面中

ionViewWillLoad() {
 const data = this.navParams.get('data');
 console.log(data);
}

如果您想将数据从模态中传回..

import {NavParams, ViewController} from 'ionic-angular';
...
    data: String
     constructor(private navParams: NavParams, private view: ViewController) {}
    ionViewWillLoad() {
     this.data = this.navParams.get('data');
     console.log(this.data);
    }

  closeModal() {
    this.view.dismiss(data);
  }

然后在调用页面中：

 const myModal: Modal = this.model.create('ModalPage', {data: myData})
 myModal.present();
 myModal.onWillDimiss(data) => {
     console.log(`About to dismiss with: ${data}`);
 })
 myModal.onDidDimiss(data) => {
     console.log(`Dismissed with: ${data}`);
 })

【讨论】：

【解决方案3】：

this.modalCtrl.create(ReminderDetailsPage, { data: data });

将对象传递给create()-方法。并在constructor 或像ngOnInit 这样的生命周期函数中调用navParams.get()。

【讨论】：