Ionic Angular中NavController调用push方法提示属性不存在

你当前项目是Ionic 4及以上版本，@ionic/angular包中的NavController已经完成重构，Ionic 3时期常用的push/pop栈导航方法被全部移除，直接调用自然会触发Property 'push' does not exist on type 'NavController'报错。
另外你代码中导入的NavParams同样是Ionic 3的废弃API，高版本Ionic中无法使用。

高版本Ionic基于Angular路由体系做导航，两种常用实现方式任选即可：

方案1：Router + queryParams传参（官方首选） #

首先修改HomePage代码，替换原有push逻辑：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  cityName = ''
  constructor(private router: Router) {}

  logForm() {
    console.log(this.cityName);
    // 跳转路径与app-routing.module.ts中配置的目标页路由完全一致
    this.router.navigate(['/current-weather'], {
      queryParams: { city: this.cityName }
    })
  }
}

在目标页面CurrentWeatherPagePage中注入ActivatedRoute接收参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-current-weather-page',
  templateUrl: './current-weather-page.page.html',
  styleUrls: ['./current-weather-page.page.scss'],
})
export class CurrentWeatherPagePage implements OnInit {
  cityName = ''
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.cityName = params.city || ''
    })
  }
}

方案2：NavController新方法模拟栈导航 #

如果需要保留类似旧版push的前进导航（自动保留返回栈），可以用NavController提供的navigateForward方法替代废弃的push：

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  cityName = ''
  constructor(public navCtrl: NavController) {}

  logForm() {
    console.log(this.cityName);
    this.navCtrl.navigateForward(['/current-weather'], {
      state: { city: this.cityName }
    });
  }
}

目标页通过Router读取state传参：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-current-weather-page',
  templateUrl: './current-weather-page.page.html',
  styleUrls: ['./current-weather-page.page.scss'],
})
export class CurrentWeatherPagePage {
  cityName = ''
  constructor(private router: Router) {
    const navState = this.router.getCurrentNavigation()?.extras.state;
    this.cityName = navState?.city || ''
  }
}

• 跳转时填写的路径必须和app-routing.module.ts中目标页面配置的path字段完全一致，否则会报路由匹配错误
• 不要再参考Ionic 3版本的旧教程开发高版本Ionic项目，导航、生命周期等核心API差异极大，很容易踩兼容坑

内容的提问来源于stack exchange，提问作者Serget