web-dev-qa-db-fra.com

ionic 4 - comment récupérer des données transmises à un modal

Selon la documentation Ionic 4, vous pouvez transmettre des données via la propriété ComponentProps. Dans Ionic3, je peux les récupérer avec le service navParams. Comment puis-je le faire dans Ionic 4?

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }
angularionic-frameworkionic4
2
Han Che

Vous devez utiliser @Input () decorator.

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

Composant: 

@Component({
  selector: 'ModalPage',
  templateUrl: './ModalPage.component.html',
  styleUrls: [ './ModalPage.component.css' ]
})
export class ModalPage  {
  name = 'Angular';
  @Input() value: any;
}
13
Suresh Kumar Ariya

Navparams fonctionne toujours dans Ionic 4 Beta-15

Page1.ts 

   import { ModalPage } from './modal.page';

   async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });

    //insert onDidDismiss() here

    return await modal.present();
   }

ModalPage.ts 

import { NavParams } from '@ionic/angular';

  export class ModalPage {
  public value = this.navParams.get('value');

  constructor(private navParams: NavParams) {}

}

Pour obtenir une valeur renvoyée de ModaPage à Page1:

Page1.ts 

modal.onDidDismiss().then((data) => {
  console.log(data);
})

IMPORTANT:

  1. Pour utiliser ModalPage dans Page1, vous devez importer le module ModalPageModule dans le fichier page1.module.ts.
0
Joel