Angular 5中app.component使用NavController报错的解决办法

这个报错其实很好理解——你在根组件（比如AppComponent）里直接尝试注入NavController，但Ionic的导航控制器是依赖于页面栈存在的，根组件初始化的时候，导航栈还没建立起来，所以系统找不到它的提供者，自然就报错了。下面给你两种靠谱的修复方式，根据你的Ionic版本选就行：

方案一：用Angular Router实现跳转（推荐Ionic 4+版本） #

这是现在Ionic的主流做法，比直接用NavController更稳妥，步骤如下：

1. 在组件里导入并注入Router
   打开你的app.component.ts，先导入Router服务，然后在构造函数里注入：

   import { Router } from '@angular/router';
   
   constructor(private router: Router) {}
   

2. 编写跳转方法
   在组件类里实现你的page()方法，直接用Router的navigate方法跳转到指定页面路径：

   page(pagePath: string) {
     this.router.navigate([`/${pagePath}`]);
   }
   

3. 在模板里调用方法
   回到app.html，给菜单按钮传递对应的页面路径就行：

   <ion-item (click)="page('home')">首页</ion-item>
   <ion-item (click)="page('about')">关于我们</ion-item>
   

4. 确保路由配置正确
   别忘了检查你的app-routing.module.ts里已经配置了对应页面的路由，比如：

   const routes: Routes = [
     { path: '', redirectTo: 'home', pathMatch: 'full' },
     { path: 'home', component: HomePage },
     { path: 'about', component: AboutPage },
   ];
   

方案二：通过ViewChild获取NavController（适合Ionic 3及更早版本） #

如果你还在维护旧版本的Ionic项目，可以用这种方式：

1. 导入ViewChild和Nav
   在app.component.ts里导入需要的依赖：

   import { ViewChild } from '@angular/core';
   import { Nav } from 'ionic-angular';
   

2. 获取Nav实例
   在组件类里用ViewChild获取页面中的导航组件实例：

   @ViewChild(Nav) nav: Nav;
   

3. 编写跳转方法
   用获取到的Nav实例来切换页面：

   page(targetPage: any) {
     this.nav.setRoot(targetPage);
   }
   

4. 模板调用
   记得先把目标页面组件导入到app.component.ts里，然后在模板里传递组件：

   <ion-item (click)="page(HomePage)">首页</ion-item>
   

简单来说，根组件里别直接注入NavController，要么用Router，要么用ViewChild拿实例，就能解决这个问题啦。

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