No provider for NavController! Ionic 3
我正在将
我收到以下错误
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?您有
必须将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); |
尝试使用
赞,
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,因为它无法注入,并且尝试这样做将导致您面临的错误。
相反,您应该在应用程序模板上有一个
正如您在ionic api文档中所见,您必须在构造函数中加载