單擊 Ionic 應用程序中的 ion-popover 內的按鈕時，如何路由到不同的組件？

Question

在我的 Ionic 應用程序中，我使用一個彈出控制器在下面顯示一個ion-popover ：

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

在popover.component.html ，我有以下按鈕：

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

當我點擊這個按鈕時，我沒有被路由到mechanic-detail組件。 如果我在home組件上放置相同的按鈕，它會按預期工作。

因此，出於某種原因，它在彈出窗口中使用時無法導航。

有人可以告訴我需要進行哪些更改，以便我可以從彈出窗口導航到mechanic-detail組件嗎？

另外，這里是我的路線：

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

Answer 1

嘗試這個

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);
    });
  }