Свойство 'onDidDismiss' не существует для типов ionic 4 и Angular

Question

Я занимаюсь разработкой приложения, и у меня есть следующий класс в TypeScript.

Я хочу попытаться получить данные в методе обратного вызова типа в «ModalController», когда он отклоняет модальное значение:

import { Component, OnInit } from '@angular/core'; 
import {NavController, ModalController} from '@ionic/angular'; 
import { Router } from '@angular/router'; 
import { HomePage } from '../home/home.page'; 
import {AddItemPage} from '../add-item/add-item.page';

@Component({   
  selector: 'app-todo',   
  templateUrl: './todo.component.html',   
  styleUrls: ['./todo.component.scss']
})

export class TodoComponent implements OnInit {

  public items;

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
    this.ionViewDidLoad();    
  }

  ngOnInit() {}

  async addItem()  {
    // Create a modal using MyModalComponent with some initial data 
     const modal = await this.modalCtrl.create({   
        component: AddItemPage,  componentProps: {
           'prop1': "cadena!!!!!!!"   
        } 
     }).then(function(modal) {   
        return modal.present(); 
     });

     modal.onDidDismiss(() => {
        // Call the method to do whatever in your home.ts
        console.log('Modal closed');
    });
  }
}

Я получил эту ошибку:

core.js: 15724 Ошибка ОШИБКИ: Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'onDidDismiss' undefinedTypeError: Невозможно прочитать свойство 'onDidDismiss'неопределенного

Answer 1

Попробуйте:

const modal = await modalController.create({...});
const { data } = await modal.onDidDismiss();
console.log(data);

Согласно официальной документации .

Answer 2

Как связано в этом посте: https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3 Моя ошибка была просто Как я создавал модал.Я следовал этому коду, чтобы создать мое модальное свойство.

async openModal() {
    const modal: HTMLIonModalElement =
       await this.modalController.create({
          component: DatePickerModal,
          componentProps: {
             aParameter: true,
             otherParameter: new Date()
          }
    });

    modal.onDidDismiss().then((detail: OverlayEventDetail) => {
       if (detail !== null) {
         console.log('The result:', detail.data);
       }
    });

    await modal.present();
}

Answer 3

Поскольку вы используете await для создания модального стиля, вам не нужно использовать then как этот.

Пожалуйста, попробуйте следующее:

async addItem()  {

  // Create the modal
  const modal = await this.modalCtrl.create({   
    component: AddItemPage,
    componentProps: {
      'prop1': "cadena!!!!!!!"   
    } 
  });

  // Present the modal
  return await modal.present();

  // Wait for the modal to be dismissed before continuing...
  const eventDetails = await modal.onDidDismiss();

  if (eventDetails) {
    console.log(eventDetails.data);
  }

  // ...

}

Приведенный выше код предполагает, что вы возвращаете что-то при отклонении модального режима, например:

// Dismiss the modal returning some data object
modalController.dismiss({
  'result': 'This is the result returned by the modal!'
});