我在Ionic 2中遇到导航问题。
如果我想通常使用this.navCtrl.push(thePage);从一个页面导航到另一个页面，我可以这样做。但是，如果我注入另一个提供者，我有这个错误：
ERROR Error: Uncaught (in promise): Error: No provider for NavController!
Error: No provider for NavController!
例如，这是我使用NavController的代码。没有我的自定义提供程序，它可以正常工作：
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
/**
* Models
*/
import { Competition } from '../../models/competition';
@Component({
selector: 'page-view-matches',
templateUrl: 'view-matches.html',
})
export class ViewMatchesPage {
private competitions: Competition[];
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private statusBar: StatusBar
) {}
public ionViewWillEnter(): void {
this.statusBar.hide();
}
public ionViewWillLeave(): void {
this.statusBar.show();
}
/**
* Navigation
*/
public goBack(): void {
this.navCtrl.pop();
}
}
但现在如果我注入CompetitionsProvider：
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
/**
* Models
*/
import { Competition } from '../../models/competition';
/**
* Providers
*/
import { CompetitionProvider } from '../../mocks/providers/competition-provider';
@Component({
selector: 'page-view-matches',
templateUrl: 'view-matches.html',
})
export class ViewMatchesPage {
private competitions: Competition[];
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private statusBar: StatusBar,
private competitionProvider: CompetitionProvider
) {
this.competitions = this.competitionProvider.getAll();
}
public ionViewWillEnter(): void {
this.statusBar.hide();
}
public ionViewWillLeave(): void {
this.statusBar.show();
}
/**
* Navigation
*/
public goBack(): void {
this.navCtrl.pop();
}
}
当我想要进入此页面时出现此错误：ERROR Error: Uncaught (in promise): Error: No provider for NavController!
Error: No provider for NavController!
为什么呢？一件事与另一件事有什么关系？
修改 它有什么可做的，我马上使用模态吗？ 导航是：RootPage - ＆gt;模态 - ＆gt;页面 - ＆gt;页面（这里有错误）
编辑2： 的 CompetitionProvider：
import { Injectable } from '@angular/core';
/**
* Models
*/
import { Competition } from '../../models/competition';
/**
* Providers
*/
import { UserProvider } from './user-provider';
import { CommentProvider } from './comment-provider';
@Injectable()
export class CompetitionProvider {
private competitions: Competition[];
constructor(
private userProvider: UserProvider,
private commentProvider: CommentProvider
) {
/**
* It would be better to directly call a partialPositionProvider.getAllById(1);
* instead generate mock partial positions here. The same with comments.
*/
this.competitions = [
{
id: 1,
partialPositions: [
{
photoURL: 'assets/img/dinesh.jpg',
user: this.userProvider.findById(1),
position: 1,
votes: [
{
user: this.userProvider.findById(2),
date: new Date()
},
{
user: this.userProvider.findById(3),
date: new Date()
},
{
user: this.userProvider.findById(4),
date: new Date()
}
]
},
{
photoURL: 'assets/img/richard1.png',
user: this.userProvider.findById(2),
position: 4,
votes: [
{
user: this.userProvider.findById(1),
date: new Date()
},
{
user: this.userProvider.findById(3),
date: new Date()
}
]
},
{
photoURL: 'assets/img/peter.png',
user: this.userProvider.findById(3),
position: 2,
votes: [
{
user: this.userProvider.findById(1),
date: new Date()
}
]
},
{
photoURL: 'assets/img/mock-photo.jpg',
user: this.userProvider.findById(4),
position: 3,
votes: [
{
user: this.userProvider.findById(1),
date: new Date()
},
{
user: this.userProvider.findById(2),
date: new Date()
},
{
user: this.userProvider.findById(3),
date: new Date()
},
{
user: this.userProvider.findById(4),
date: new Date()
},
{
user: this.userProvider.findById(5),
date: new Date()
}
]
}
],
comments: this.commentProvider.getAll(),
hiddenComments: true
},
{
id: 2,
partialPositions: [
{
photoURL: 'assets/img/dinesh.jpg',
user: this.userProvider.findById(1),
position: 1,
votes: [
{
user: this.userProvider.findById(2),
date: new Date()
},
{
user: this.userProvider.findById(3),
date: new Date()
}
]
},
{
photoURL: 'assets/img/richard1.png',
user: this.userProvider.findById(2),
position: 4,
votes: [
{
user: this.userProvider.findById(1),
date: new Date()
},
{
user: this.userProvider.findById(3),
date: new Date()
}
]
},
{
photoURL: 'assets/img/peter.png',
user: this.userProvider.findById(3),
position: 2,
votes: [
{
user: this.userProvider.findById(1),
date: new Date()
},
{
user: this.userProvider.findById(2),
date: new Date()
}
]
},
{
photoURL: 'assets/img/mock-photo.jpg',
user: this.userProvider.findById(4),
position: 3,
votes: [
{
user: this.userProvider.findById(1),
date: new Date()
},
{
user: this.userProvider.findById(2),
date: new Date()
}
]
}
],
comments: this.commentProvider.getAll(),
hiddenComments: true
}
];
}
public getAll(): Competition[] {
return this.competitions;
}
public add(competition: Competition) {
this.competitions.push(competition);
}
public delete(competition: Competition) {
this.competitions.splice(this.competitions.indexOf(competition), 1);
}
}
在app.module中：
/**
* Ionic Native Modules
*/
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { HttpModule } from '@angular/http';
import { Camera } from '@ionic-native/camera';
/**
* Pages
*/
import { RankingsPage } from '../pages/rankings/rankings';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { ViewCategoriesPage } from '../pages/view-categories/view-categories';
import { SettingsPage } from '../pages/settings/settings';
import { OwnProfilePage } from '../pages/own-profile/own-profile';
import { OwnProfileGalleryPhotoPage } from '../pages/own-profile-gallery-photo/own-profile-gallery-photo';
import { ExternalUserProfilePage } from '../pages/external-user-profile/external-user-profile';
import { UserNavPanelPage } from '../pages/user-nav-panel/user-nav-panel';
import { InboxPage } from '../pages/inbox/inbox';
import { MedalsPage } from '../pages/medals/medals';
import { ContactPage } from '../pages/contact/contact';
import { UserFollowsPage } from '../pages/user-follows/user-follows';
import { FollowersPage } from '../pages/followers/followers';
import { FollowingPage } from '../pages/following/following';
import { SettingsOwnProfileNamePage } from '../pages/settings-own-profile-name/settings-own-profile-name';
import { NearUsersPage } from '../pages/near-users/near-users';
import { CompetitionPhotosPage } from '../pages/competition-photos/competition-photos';
import { ExpandProfilePhotoPage } from '../pages/expand-profile-photo/expand-profile-photo';
import { ViewMatchesPage } from '../pages/view-matches/view-matches';
/**
* Repositories
*/
import { CategoriesRepository } from '../repositories/categories';
/**
* Providers
*/
import { StylerProvider } from '../providers/styler/styler';
import { UserSettingsProvider } from '../providers/user-settings/user-settings';
import { ScrollBySectionProvider } from '../providers/scroll-by-section/scroll-by-section';
import { UserNavItemProvider } from '../providers/user-nav-item/user-nav-item';
import { AlertsProvider } from '../providers/alerts/alerts';
import { OwnProfileProvider } from '../providers/own-profile/own-profile';
import { UserProvider } from '../mocks/providers/user-provider';
import { CategoriesProvider } from '../providers/categories/categories';
import { CompetitionProvider } from '../mocks/providers/competition-provider';
@NgModule({
declarations: [
MyApp,
RankingsPage,
HomePage,
LoginPage,
ViewCategoriesPage,
SettingsPage,
OwnProfilePage,
ExternalUserProfilePage,
UserNavPanelPage,
InboxPage,
MedalsPage,
ContactPage,
UserFollowsPage,
FollowersPage,
FollowingPage,
SettingsOwnProfileNamePage,
OwnProfileGalleryPhotoPage,
NearUsersPage,
CompetitionPhotosPage,
ExpandProfilePhotoPage,
ViewMatchesPage
],
imports: [
HttpModule,
BrowserModule,
IonicModule.forRoot(MyApp, {
activator: 'highlight', //Pressing effect buttons
iconMode: 'md',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
mode: 'md',
pageTransition: 'md',
swipeBackEnabled: true
}),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['sqlite', 'websql', 'indexeddb']
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
RankingsPage,
HomePage,
LoginPage,
ViewCategoriesPage,
SettingsPage,
OwnProfilePage,
ExternalUserProfilePage,
UserNavPanelPage,
InboxPage,
MedalsPage,
ContactPage,
UserFollowsPage,
FollowersPage,
FollowingPage,
SettingsOwnProfileNamePage,
OwnProfileGalleryPhotoPage,
NearUsersPage,
CompetitionPhotosPage,
ExpandProfilePhotoPage,
ViewMatchesPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
ScreenOrientation,
StylerProvider,
UserSettingsProvider,
ScrollBySectionProvider,
UserNavItemProvider,
AlertsProvider,
AlertsProvider,
OwnProfileProvider,
UserProvider,
Camera,
CategoriesProvider,
CategoriesRepository,
CompetitionProvider
]
})
export class AppModule {}