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

【问题标题】：Using ion-nav-push/pop in ionic 4 Modal在 ionic 4 Modal 中使用 ion-nav-push/pop
【发布时间】：2019-09-23 18:06:49
【问题描述】：

我已经知道 Ionic 4 使用 Angular 路由器进行导航
我在询问模态中的子导航（由 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-framework ionic4

【解决方案1】：

您好，我刚刚遇到了同样的问题。我确实通过使用 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 });
}

【讨论】：

【解决方案2】：

<ion-nav> 现在显然错过了文档，我需要它在模态中进行导航，而不影响 Angular Routing。以下是我的实现方式：

MyModal.component.ts

@Component({
  selector: "my-modal",
  templateUrl: "./my-modal.component.html",
  styleUrls: ["./my-modal.component.scss"]
})
export class MyModalComponent implements OnInit {
  @ViewChild("nav", { static: true }) nav: IonNav;

  ngOnInit(): void {
    this.nav.setRoot(MyFirstPage, { nav: this.nav }); // MyFirstPage is a class of an Angular component
  }
}

my-modal.component.html

<ion-nav #nav></ion-nav>

MyFirstPage.component.ts

@Component({
  selector: "my-first-page",
  templateUrl: "./my-first-page.component.html",
  styleUrls: ["./my-first-page.component.scss"]
})
export class MyFirstPageComponent {
  @Input() nav: IonNav;

  navigate(): void {
    this.nav.push(MySecondPage); // MySecondPage is a class of an Angular component
  }
}

my-first-page.component.html

<ion-button (click)="navigate()"></ion-button>

MySecondPage.component.ts

@Component({
  selector: "my-second-page",
  templateUrl: "./my-second-page.component.html",
  styleUrls: ["./my-second-page.component.scss"]
})
export class MySecondPageComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    // stuff
  }
}

my-second-page.component.html

<div>hello from second page</div>

【讨论】：