web-dev-qa-db-fra.com

Ionic 4 comment puis-je recevoir des componentProps?

Dans Ionic 4, j'essaie d'utiliser le modalController pour ouvrir un modal. Je peux ouvrir le modal et envoyer componentProps, mais je suis ne sais pas comment recevoir ces propriétés.

Voici comment j'ouvre le composant modal:

async showUpsert() {
  this.modal = await this.modalController.create({
    component:UpsertComponent,
    componentProps: {test: "123"}
  });
  return await this.modal.present();
}

Ma question est; dans le modal actuel, comment puis-je obtenir test: "123" dans une variable?

ionic-frameworkionic4
11
ntgCleaner

Vous pouvez prendre ces valeurs avec Input Component Interaction dans le composant dont vous aurez besoin, par exemple:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(public modalController: ModalController){}
  async presentModal() {
    const modal = await this.modalController.create({
      component: TestComponent,
      componentProps: { value: 123, otherValue: 234 }
    });
    return await modal.present();
  }
}

Dans votre composant modal avec Input, vous pouvez prendre ces paramètres:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  @Input("value") value;
  @Input() otherValue;
  constructor() { }

  ngOnInit() {
    //print 123
    console.log(this.value);
    //print 234
    console.log(this.otherValue);
  }
}
17
Sergio Escudero

Vous pouvez également utiliser Navparams pour obtenir la valeur de componentProps.

import { CommentModalPage } from '../comment-modal/comment-modal.page';
import { ModalController, IonContent } from '@ionic/angular';


constructor(public modalCtrl : ModalController) {  }

  async commentModal() {
      const modal = await this.modalCtrl.create({
        component: CommentModalPage,

        componentProps: { value: 'data'}
      });
      return await modal.present();
   }

Dans votre commentModalPage, il vous suffit d'importer des navprams et d'en tirer la valeur.

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

constructor(public navParams : NavParams) {  

              console.log(this.navParams.get('value'));

            }
1
Tahseen Quraishi