[英]How to route to a different component when clicking a button inside an ion-popover in Ionic app?
In my Ionic app, I am using a Pop-up Controller to display an ion-popover below:在我的 Ionic 应用程序中,我使用一个弹出控制器在下面显示一个ion-popover :
private showMechanicInfo(name: string) {
this.popoverCtrl
.create({
component: MechanicPopoverComponent,
})
.then((alertEl) => {
alertEl.present();
});
}
Within popover.component.html
, I have the below button:在popover.component.html
,我有以下按钮:
<ion-button [routerLink]="['/mechanic-detail']">Profile</ion-button>
When I click this button, I am not routed to the mechanic-detail
component.当我点击这个按钮时,我没有被路由到mechanic-detail
组件。 If I place the same button on the home
component though, it works as expected.如果我在home
组件上放置相同的按钮,它会按预期工作。
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?有人可以告诉我需要进行哪些更改,以便我可以从弹出窗口导航到mechanic-detail
组件吗?
Also, here are my routes:另外,这里是我的路线:
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'mechanic-detail',
loadChildren: () => import('./mechanic-detail/mechanic-detail.module').then( m => m.MechanicDetailPageModule)
}
Try this尝试这个
popover.component.html popover.component.html
<ion-button (click)="goMechDetail()">Profile</ion-button>
popover.component.ts 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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.