离子 3 模态导航参数返回未定义

Question

所以我正在尝试将字符串作为参数传递给模态(特别是大纲/细节(，并且模态确实打开了，但字符串返回未定义。

这是父 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>

如果我控制台.log(数据(，它会像往常一样返回提醒。但是当我尝试在"提醒详细信息"模式上获取它时：

export class ReminderDetailsPage {
EditedReminder: string = this.navParams.get('data');

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

Answer 1

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

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

Answer 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}`);
})

Answer 3

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