How to route to a different component when clicking a button inside an ion-popover in Ionic app?

Question

In my Ionic app, I am using a Pop-up Controller to display an ion-popover below:

private showMechanicInfo(name: string) {
    this.popoverCtrl
      .create({
        component: MechanicPopoverComponent,
      })
      .then((alertEl) => {
        alertEl.present();
      });
  }

Within popover.component.html , I have the below button:

<ion-button [routerLink]="['/mechanic-detail']">Profile</ion-button>

When I click this button, I am not routed to the mechanic-detail component. If I place the same button on the home component though, it works as expected.

So for some reason, it isn't navigating when used in the pop-over.

Can someone please tell me what changes are required so that I can navigate from the pop-over to the mechanic-detail component?

Also, here are my routes:

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'mechanic-detail',
    loadChildren: () => import('./mechanic-detail/mechanic-detail.module').then( m => m.MechanicDetailPageModule)
  }

Answer 1

Try this

popover.component.html

<ion-button (click)="goMechDetail()">Profile</ion-button>

popover.component.ts

import { Router } from "@angular/router";
import { PopoverController } from "@ionic/angular";

...

  constructor(
    public popoverController: PopoverController,
    private router: Router
  ) {}

...

  goMechDetail() {
    this.popoverController.dismiss().then(() => {
      setTimeout(() => {
        this.router.navigate(["mechanic-detail"], { replaceUrl: false });
      }, 100);
    });
  }