Angular2 - this.router.navigate不是一个函数

Question

我正在用Ionic学习Angular2并制作一个登录页面。 但是当加载页面时，会发生以下错误：'router.initialNavigation不是函数'

所以我在 app.routing.ts 中添加了'{initialNavigation : false}'， 像这样：

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {initialNavigation : false})],
  exports: [ RouterModule ]
})

但在此之后，它显示此错误：'router.setUpLocationChangeListener不是函数'

无论添加'initialNavigation:false'，当我点击登录按钮时，我都明白：'this.router.navigate不是函数'

我找不到问题...请帮帮我！你会在下面找到我的代码。

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Router, Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AppRoutingModule } from './app.routing';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  providers: [//전역에서 사용할 서비스
    StatusBar,
    SplashScreen,
    {provide: Router, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

const appRoutes: Routes = [
    { path: '', component: TabsPage},
    { path: '/login', component: LoginPage },
    { path: '/tabs', component: TabsPage },

    { path: '**', redirectTo: 'tabs' }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {initialNavigation : false})],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

login.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';//for .map()
import 'rxjs/add/operator/map';//for .map()
import { Router, Routes, RouterModule } from '@angular/router';

import { TabsPage } from '../tabs/tabs';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  id:string="";
  pw:string="";
  rootPage:any = TabsPage;

  constructor(public navCtrl: NavController, private http: Http, private router: Router) {

  }

  ngOnInit(){

  }

  loginAction(){
      let id:string = this.id;
      let pw:string = this.pw;

      this.http.post("http://localhost:80/loginAction", {
          id:id,
          pw:pw
      }, '').map(response => response.json()).subscribe(data => {
                this.router.navigate(['/tabs']);
                console.log(data);
      });
  }

}

的login.html

<ion-header>
  <ion-navbar>
    <base href="/" />
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

    <ion-list>
      <ion-item>
        <ion-label floating>Id</ion-label>
        <ion-input type="text" value="" [(ngModel)]="id"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" value="" [(ngModel)]="pw"></ion-input>
      </ion-item>
    </ion-list>

    <div padding>
      <button ion-button color="primary" (click)="loginAction()" block>Sign In</button>
    </div>

</ion-content>>

Answer 1

虽然我不熟悉Ionic作为平台。我可以看到您在app.module中将Router映射到IonicErrorHandler

{provide: Router, useClass: IonicErrorHandler}正在覆盖路由器

编辑：我刚刚对IonicErrorHandler实际正在做的事情进行了一些挖掘，看起来您可能想要{ provide: ErrorHandler, useClass: IonicErrorHandler }而不是覆盖路由器提供商的上述行