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

在 Ionic 应用程序中单击 ion-popover 内的按钮时如何路由到不同的组件？

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

typescript

angular-routing

ionic-framework

angular