Ionic framework NavController没有提供程序！离子3

我正在使用

Ionic3

进行我的大学项目，我在

app.html

中添加了设置部分，并尝试链接

（单击）=“home（）”

，但它对我不起作用

我犯了以下错误

错误：NavController没有提供程序！ 在注入错误（） 不提供错误（） 在ReflectiveInjector_508;.throwOrNull（）处 在ReflectiveInjector.getByKeyDefault（）处 在ReflectiveInjector.getByKey（）处 在ReflectiveInjector.get（）处 在resolveNgModuleDep（）处 在NgModuleRef.get（）处 在resolveDep（）处 在createClass（）上

app.html

<!--------------------------------------Main Navigation--------------------------->

<ion-menu id="myMenu" [content]="content" side="right" persistent="true" [class]="selectedTheme">
  <ion-header>
    <ion-toolbar>
      <ion-grid>

        <ion-row>
          <ion-col col-6>
            <div text-left style="" class="app-listname">
              Project</div>
          </ion-col>
          <ion-col  (click)="home()">
            <div class="tether-setting" style="text-align: right;font-size: 2rem; color:#a57958;">
              <ion-icon ios="ios-settings-outline" md="md-settings"></ion-icon>
            </div>

          </ion-col>
          <ion-col>
            <div class="tether-logout" style="font-size: 2rem; color:#a57958; text-indent: 0rem;  text-align: right;">
              <ion-icon ios="ios-log-out" md="md-log-out"></ion-icon>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>

    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div class="ion-tm">
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" [class.activeHighlight]="checkActive(p)" (click)="openPage(p)">
          <ion-icon [name]="p.icon" item-left></ion-icon>{{p.title}}</button>

      </ion-list>
    </div>
  </ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedTheme"></ion-nav>
<!--------------------------------------Main Navigation--------------------------->

项目
{{p.title}}

应用程序组件.ts

   import {Component, ViewChild} from '@angular/core';
import {Nav, Platform,NavController} from 'ionic-angular';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';

import {HomePage} from '../pages/home/home';

import {SettingsPage} from "../pages/settings/settings";
import {HelpPage} from "../pages/help/help";

import {UserloginslidePage} from "../pages/userloginslide/userloginslide";
import {SettingsProvider} from "../providers/settings/settings";
import {ModalPage} from "../pages/modal/modal";
@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any = UserloginPage;
  selectedTheme: String;  //Themeoption
  activepage: any;
  pages: Array<{ title: string, component: any, icon: string }>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);  //Themeoption

    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });


    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });


    this.pages = [

      {title: 'Dashboard', component: HomePage, icon: "ios-home-outline"},

      {title: 'Settings', component: SettingsPage, icon: "ios-settings-outline"},
      {title: 'Help', component: HelpPage, icon: "ios-help-circle-outline"},
      {title: '  User loginslide ', component:UserloginslidePage, icon: "ios-contact-outline"},


    ];

    this.activepage = this.pages[0];
  }


  //Themeoption
  openPage(page) {


    this.nav.setRoot(page.component);
    this.activepage = page;

  }
  checkActive(page) {
    return page == this.activepage;
  }

  home(){
    this.navCtrl.push(HomePage);
  }
}

从'@angular/core'导入{Component，ViewChild}；
从“离子角”导入{Nav、平台、NavController}；
从'@ionic native/status bar'导入{StatusBar}；
从'@ionic native/SplashScreen'导入{SplashScreen}；
从“../pages/home/home”导入{HomePage}；
从“./pages/settings/settings”导入{SettingsPage}；
从“./pages/help/help”导入{HelpPage}；
从“./pages/userloginslide/userloginslide”导入{UserloginslidePage}；
从“./providers/settings/settings”导入{SettingsProvider}；
从“./pages/modal/modal”导入{ModalPage}；
@组成部分({
templateUrl:'app.html'
})
导出类MyApp{
@ViewChild（导航）导航：导航；
rootPage:any=UserloginPage；
selectedTheme:String；//选项
动态页面：任意；
页面：数组；
构造器（平台：平台，状态栏：状态栏，飞溅屏幕：飞溅屏幕，私人设置：设置Provider，私人导航Ctrl:NavController）{
this.settings.getActiveTheme（）.subscribe（val=>this.selectedTheme=val）；//Themeoption
platform.ready（）。然后（（）=>{
statusBar.styleDefault（）；
splashScreen.hide（）；
});
platform.ready（）。然后（（）=>{
//好了，平台准备好了，我们的插件也可以使用了。
//在这里，您可以做任何您可能需要的更高级别的本地操作。
statusBar.styleDefault（）；
splashScreen.hide（）；
});
此页=[
{标题：“仪表板”，组件：主页，图标：“ios主页轮廓”}，
{标题：“设置”，组件：设置页面，图标：“ios设置大纲”}，
{标题：“帮助”，组件：帮助页，图标：“ios帮助圆圈轮廓”}，
{title:'User loginslide'，组件：userloginslide页面，图标：“ios联系人大纲”}，
];
this.activepage=this.pages[0]；
}
//运动
openPage（第页）{
this.nav.setRoot（page.component）；
this.activepage=page；
}
选中活动（第页）{
返回页面==this.activepage；
}
home（）{
this.navCtrl.push（主页）；
}
}

尝试使用

getActiveNav（）

像这样,

import {App} from 'ionic-angular';

constructor(public app: App){}

login() { 
    this.app.getActiveNav().setRoot(Home); 
}

---

正如您在ionic中看到的，您必须在构造函数中加载

NavController

：

---

构造函数（私有navCtrl:NavController）{}

那么，为什么要尝试导入NavController呢？您有

@ViewChild（Nav）Nav:Nav您可以使用它

必须从构造函数中的注入中删除NavController

替换你的线路

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {

与

然后更换线路

 this.navCtrl.push(HomePage);

与

我已经通过以下代码解决了离子3中的这个问题

import {App} from 'ionic-angular';

constructor(public app: App){}

login() { 
    this.app.getActiveNav().push(XxxPage);
}

根据：

无法注入NavController，因为作为导航控制器的任何组件都是根组件的子组件，因此它们无法被注入

您将需要从构造函数中删除NavController，因为它无法被注入，尝试这样做将导致您面临的错误

相反，你应该在你的应用程序模板上有一个
组件，并使用@ViewChild指令在AppComponent的代码上获得它的实例。
你应该声明他们需要从构造函数中删除NavController这是你更新的代码吗？没有getActiveNav（）@VolodymyrBilyachat为什么？即使你有错误，它也不会抛出任何错误imported@Gowtham我认为如果你尝试注入它，它会抛出一个错误。是的，如果您只是导入了它的ok，但如果您注入它，它将失败。（getActiveNav）已被弃用，并将在下一个主要版本中删除。改用getActiveNavs。好吧，是的，当你更新了我能看到的代码。。。似乎在app.component.ts页面中没有NavController提供程序，您只是在这里演示
。正如Volodymyr提到的，请尝试使用ViewChild对象。请尝试此解决方案，因为未定义NAV。I使用
nav
时，在app.component.ts（离子3）导航中添加代码不可用，用户无法返回@KhurshidAnsari你什么时候打nav？在ng init上的构造函数中？@volodymyr bilyachat我解出了参数。我正在使用：
this.nav.push（page，paramObj）
并且有效！
 this.nav.push(HomePage);

import {App} from 'ionic-angular';

constructor(public app: App){}

login() { 
    this.app.getActiveNav().push(XxxPage);
}