web-dev-qa-db-fra.com

Ignorer Ionic 4 popover de son composant

J'ai une page standard Ionic 4 (Accueil) qui crée un popover qui utilise un composant (BusinessDetails) avec un bouton qui redirige vers une nouvelle page (RequestTurn). Cependant, lorsque je clique dessus, , le popover n'est pas rejeté et s'affiche en haut de ma page RequestTurn. Je suppose que je dois le supprimer manuellement du composant (BusinessDetails), mais je ne sais pas comment accéder à l'instance du popover à partir de là, car il a été créé dans la page d'accueil. Existe-t-il un moyen de le faire?

home.page.ts

presentModal(business:Business, event: Event) {
this.popoverController.create(({
    component: BusinessDetailsComponent,
    cssClass: "business-popover",
    showBackdrop: true,
    componentProps: {
        business: business
    }
}) as any).then(popover => popover.present()); }

business-detail.component.ts

goToRequestTurn(id: string) {
   //Need to dismiss popver here (?)
   this.router.navigateByUrl(`/request-turn/${id}`); }

Merci de votre aide.

popoverionic4
9
hugonne

ajouter private popoverController: PopoverController au constructeur du composant

puis écrivez une fonction comme celle-ci et appelez-la lorsque vous souhaitez ignorer le modal

 async DismissClick() {
await this.popoverController.dismiss();
  }
22
Ehsan Kiani

J'ai résolu ce problème comme suit: Dans le composant parent, j'ai passé le rappel comme accessoire au composant enfant:

const popover = await this.popoverController.create({
  component: PopoverComponent,
  event: ev,
  componentProps: {
    onClick: () => {
      popover.dismiss();
    },
  },
});
await popover.present();

Et dans PopoverComponent, j'ai ajouté @Input() onClick; qui a appelé lorsque l'utilisateur clique:

...
@Input()
public onClick = () => {}
...
afterClick() {
  this.onClick();
}
1
Денис