As part of my app development project, I implemented a popover feature that opens when clicking on a label. Initially, this functioned smoothly within a tab navigation setup. However, after transitioning from tab modules to the app-routing module to display tabs on every page, I encountered an issue. When attempting to open the popover labeled "rateus" by clicking on the label "bewertung" on the 5th tab ("more"), it fails to appear. Strangely, the popover opens on the 1st tab ("home") instead, rendering it inaccessible for interaction.
more.page.ts
import { Component, OnInit } from '@angular/core';
import { ModalController, NavController, PopoverController } from '@ionic/angular'
import { RateusPage } from 'src/app/popover/rateus/rateus.page';
@Component({
selector: 'app-more',
templateUrl: './more.page.html',
styleUrls: ['./more.page.scss'],
})
export class MorePage implements OnInit {
constructor(
private popoverController: PopoverController,
private modalController: ModalController
) { }
ngOnInit() {
}
async presentPopover() {
console.log('I got clicked')
const popover = await this.popoverController.create({
component: RateusPage,
});
popover.present();
}
}
rateus.page.html
<ion-item>
<ion-label>
Bewertung
</ion-label>
</ion-item>
<ion-content padding>
<ion-button expand="full" (click)=rateusDismiss()>Close</ion-button>
</ion-content>
rateus.page.ts
import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
@Component({
selector: 'app-rateus',
templateUrl: './rateus.page.html',
styleUrls: ['./rateus.page.scss'],
})
export class RateusPage implements OnInit {
constructor(private popoverController: PopoverController) { }
ngOnInit() {
}
rateusDismiss(){
console.log("dismiss")
this.popoverController.dismiss();
}
}