angular - ion-nav 推送方法在 Ionic 4 中不起作用

Question

<ion-nav>根据此处的文档支持推送 -- https://ionicframework.com/docs/api/nav

我的 currentPage html (current-page.page.html) 有一个按钮组件 -

<ion-button (click)="goToNextPage()">Next Page</ion-button>

我的 currentPage 脚本文件 (current-page.page.ts) 有以下代码 -

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { NextPage } from '../next-page/next-page.page';

@Component({
  selector: 'current-page',
  templateUrl: './current-page.page.html',
  styleUrls: ['./current-page.page.scss'],
})
export class CurrentPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  goToNextPage () {
    this.navCtrl.push('NextPage');
  }

  ngOnInit() {
  }

}

但是，我收到格式错误 Property 'push' does not exist on type 'NavController'

不确定如何正确使用 push 方法。任何帮助将不胜感激。

Answer 1

因此 ion-nav 不再以与 ionic 3 相同的容量使用。

它在 Ionic 4 中的用例是“......你可以有一个模态，它需要它自己的子导航，但不要让它绑定(bind)到应用程序 URL 的情况”。

你的使用方式是:

将其添加到您的模板中:

...
<ion-nav #ionNav></ion-nav> 
...

在您的 ts 文件中使用 ViewChild 访问它及其方法:

import { Component, ViewChild } from '@angular/core';
import { IonNav } from '@ionic/angular';
...
export class YourPage {

  @ViewChild('ionNav') ionNav:IonNav;
  ...

  ngAfterViewInit() {
    ... // after this hook and onwards you can call:
    this.ionNav.push("someComponent");
  }
}