没有NavController的提供者!离子3

No provider for NavController! Ionic 3

我正在将Ionic3用于我的大学项目,我已经添加了app.html的设置部分并尝试链接(click)="home()",但是它对我不起作用。

我收到以下错误

Error: No provider for NavController!
at injectionError (http://localhost:8100/build/vendor.js:1527:90)
at noProviderError (http://localhost:8100/build/vendor.js:1565:12)
at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/vendor.js:3007:19)
at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/vendor.js:3046:25)
at ReflectiveInjector.getByKey (http://localhost:8100/build/vendor.js:2978:25)
at ReflectiveInjector.get (http://localhost:8100/build/vendor.js:2847:21)
at resolveNgModuleDep (http://localhost:8100/build/vendor.js:9847:25)
at NgModuleRef_.get (http://localhost:8100/build/vendor.js:10935:16)
at resolveDep (http://localhost:8100/build/vendor.js:11438:45)
at createClass (http://localhost:8100/build/vendor.js:11302:32)

app.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--------------------------------------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>
           
              Project
          </ion-col>
          <ion-col  (click)="home()">
           
              <ion-icon ios="ios-settings-outline" md="md-settings"></ion-icon>
           

          </ion-col>
          <ion-col>
           
              <ion-icon ios="ios-log-out" md="md-log-out"></ion-icon>
           
          </ion-col>
        </ion-row>
      </ion-grid>

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

  <ion-content>
   
      <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>
   
  </ion-content>

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

app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
   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);
  }
}

那么,为什么要尝试导入NavController?您有@ViewChild(Nav) nav: Nav;可以使用它。

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

替换行

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

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

然后替换行

1
 this.navCtrl.push(HomePage);

1
 this.nav.push(HomePage);


尝试使用getActiveNav()

赞,

1
2
3
4
5
6
7
import {App} from 'ionic-angular';

constructor(public app: App){}

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


我已通过以下代码在离子3中解决了此问题。

1
2
3
4
5
6
7
import {App} from 'ionic-angular';

constructor(public app: App){}

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

根据Ionic v3文档:

You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

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

相反,您应该在应用程序模板上有一个<ion-nav>组件,并使用@ViewChild指令在AppComponent的代码隐藏中获取其实例。


正如您在ionic api文档中所见,您必须在构造函数中加载NavController

constructor(private navCtrl: NavController) {}