没有 NavController 的提供者!离子 3
[英] No provider for NavController! Ionic 3
本文介绍了没有 NavController 的提供者!离子 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将 Ionic3
用于我的大学项目,我添加了 app.html
的设置部分并尝试链接 (click)="home()"
但它对我不起作用.
出现以下错误
<块引用>
错误:NavController 没有提供程序!at injectionError (http://localhost:8100/build/vendor.js:1527:90)在 noProviderError (http://localhost:8100/build/vendor.js:1565:12)在 ReflectiveInjector_.throwOrNull (http://localhost:8100/build/vendor.js:3007:19)在 ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/vendor.js:3046:25)在 ReflectiveInjector.getByKey (http://localhost:8100/build/vendor.js:2978:25)在 ReflectiveInjector.get (http://localhost:8100/build/vendor.js:2847:21)在 resolveNgModuleDep (http://localhost:8100/build/vendor.js:9847:25)在 NgModuleRef_.get (http://localhost:8100/build/vendor.js:10935:16)在 resolveDep (http://localhost:8100/build/vendor.js:11438:45)在 createClass (http://localhost:8100/build/vendor.js:11302:32)
app.html
<!--------------------------------------主导航---------------------------><ion-menu id="myMenu" [content]="content" side="right" persistent="true" [class]="selectedTheme"><离子头><离子工具栏><离子网格><离子行><ion-col col-6><div text-left style="" class="app-listname">项目
</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>
</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>
</ion-col></ion-row></离子网格></ion-toolbar></ion-header><离子含量><div class="ion-tm"><离子列表><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-menu><ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedTheme"></ion-nav><!--------------------------------------主导航--------------------------->
app.component.ts
import {Component, ViewChild} from '@angular/core';从'ionic-angular'导入{Nav, Platform,NavController};从@ionic-native/status-bar"导入 {StatusBar};从@ionic-native/splash-screen"导入 {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};@零件({模板网址:'app.html'})导出类 MyApp {@ViewChild(Nav) 导航:导航;rootPage: any = UserloginPage;selectedTheme:字符串;//主题选项活动页面:任何;页面:数组<{标题:字符串,组件:任何,图标:字符串}>;构造函数(平台:平台,状态栏:状态栏,飞溅屏幕:SplashScreen,私有设置:SettingsProvider,私有导航控件:导航控制器){this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);//主题选项platform.ready().then(() => {statusBar.styleDefault();splashScreen.hide();});platform.ready().then(() => {//好的,所以平台已经准备好了,我们的插件也可用了.//在这里,您可以执行您可能需要的任何更高级别的本机操作.statusBar.styleDefault();splashScreen.hide();});this.pages = [{title: 'Dashboard', component: HomePage, icon: "ios-home-outline"},{title: '设置', 组件: SettingsPage, icon: "ios-settings-outline"},{title: 'Help', component: HelpPage, icon: "ios-help-circle-outline"},{title: '用户登录幻灯片', 组件:UserloginslidePage, icon: "ios-contact-outline"},];this.activepage = this.pages[0];}//主题选项打开页面(页面){this.nav.setRoot(page.component);this.activepage = 页面;}检查活动(页面){返回页面 == this.activepage;}家(){this.navCtrl.push(HomePage);}}
解决方案
那么,为什么要尝试导入 NavController?你有 @ViewChild(Nav) nav: Nav;
你可以使用它.
您必须从构造函数中的注入中删除NavController
更换您的线路
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {
与
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider) {
然后替换该行
this.navCtrl.push(HomePage);
与
this.nav.push(HomePage);
I'm Using Ionic3
for my university project , I had added setting parts of my app.html
and trying to link (click)="home()"
but it's not working for me.
I got following error
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
<!--------------------------------------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--------------------------->
app.component.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);
}
}
解决方案
Well, why do you try to import NavController? You have @ViewChild(Nav) nav: Nav;
you can use it.
You must remove NavController from injecting in your constructor
Replace your line
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {
with
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider) {
Then replace the line
this.navCtrl.push(HomePage);
with
this.nav.push(HomePage);
这篇关于没有 NavController 的提供者!离子 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!