时间戳

首页 > 解决方案 > 在 ionic 4 Modal 中使用 ion-nav-push/pop

ionic-framework - 在 ionic 4 Modal 中使用 ion-nav-push/pop

问题描述

  1. 我已经知道 Ionic 4 使用 Angular 路由器进行导航
  2. 我在询问模态中的子导航（由 ionic 4 docs https://ionicframework.com/docs/api/nav#properties推荐）

我该如何正确实施？（关于 ios/android 的 Ionic4/Angular 项目）

我能够看到一个组件..

所以我打开我的模态并将根组件传递给它，其中包含...

<ion-nav [root]="rootPage"></ion-nav>

这里的 rootPage 是一个变量集，一个实际的组件让我们称之为 ListViewComponent ...

然后我将每个列表项都像这样包围......

<ion-nav-push [component]="profile"> <ion-item detail>Personal Information</ion-item> </ion-nav-push>

这会将另一个组件推入 ProfileComponent 的视图中......并且它可以工作。

我遇到的问题是试图从 ProfileComponent 推送另一个组件...我有另一个项目被 ion-nav-push 标签包围...但是“什么都没有”发生...没有错误没有推送什么...我是疯了，离子导航只能导航一维，还是我的设置不正确……任何建议都会有所帮助。我再次尝试在每个 ionic4 文档的模型中进行非常、基本、简单的导航。谢谢。

标签： ionic-frameworkionic4

解决方案

您好我刚刚遇到了同样的问题。我确实通过使用 document.getElementId 直接访问 ion-nav 来解决它。

@Component({
    selector: 'some-cmp',
    template: `
        <ion-nav [root]="root" [rootParams]="rootParams" id="some-cmp-id" [animation]="animationFn"></ion-nav>
    `,
})

然后你可以使用你的子页面

private nav: IonNav = document.getElementById('some-cmp-id') as any;

onConfirmConsumedAll() {
        this.nav.push(OtherCmp, { props });
}

推荐阅读