在Ionic应用程序中单击离子弹出窗口内的按钮时，如何路由到不同的组件

Question

在我的Ionic应用程序中，我使用弹出式控制器在下面显示离子弹出：

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