Ioni c popover не отправляет данные

Question

Я пытаюсь отправить данные в свой компонент popover, но он не отправляет данные.

Код

HTML

<div class="message" id="conversation" *ngFor="let message of messages.notes">
    <ion-row class="message-body">
      <ion-col (click)="presentPopover($event)" size="12" class="message-main-sender" *ngIf="message.user.id === user.id; else receiverNote">
          // rest of message detail...
      </ion-col>
    </ion-row>
</div>

component

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: MessagesComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
}

popover component (здесь невозможно получить отправленные данные)

reply() {
    console.log('my_data1 : ', this.navParams.get('data')); // undefined
    console.log('my_data2 : ', this.activatedRoute.snapshot.paramMap.get('event')); // null
}

Есть идеи?

Answer 1

Вы можете использовать componentProps для отправки данных в ваше всплывающее окно

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: MessagesComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true,
      componentProps: {
        id: 1
      }
    });

    return await popover.present();
}

Получить данные в MessagesComponent с помощью navParams:

constructor(private navParams: NavParams) {}

ngOnInit() {
  console.log(this.navParams.get('id')); // 1
}

---

Отправить данные обратно в исходное состояние page

Отправьте данные обратно в свой компонент с помощью dismiss.

this.popoverController.dismiss({ id: 1 });

Готово к их получению внутри созданной функции presentPopover

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      // ...
    });

    popover.onDidDismiss().then((result: object) => {
      if (result['data']) {
        console.log(result['data'].id) // 1
      }
    });

    return await popover.present();
}