Angular2注入的路由器未定义

如果我将路由器从 @angular/router 注入到组件中然后使用它，我会收到一条错误消息，指出无法调用未定义的 navigatorByUrl。

这是我使用路由器实例的组件：

import { Component, OnInit } from '@angular/core';
import { UserAccountService } from '../service/user-account.service'
import { Response } from '@angular/http';
import * as jQuery from 'jquery';
import { Router } from '@angular/router';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private userAccountService: UserAccountService,
              private appRouter: Router) { }

  public loginClicked(): void {
    this.userAccountService.Login(this.Email, this.Password).subscribe(this.loginCallback);
  }

  private loginCallback(data: any) {
    if(data.success) {
      localStorage.setItem('access_token', data.token);
      this.appRouter.navigateByUrl('/dashboard'); //-> error
    } else {
      [...]
    }  
  }
}

路由在应用程序模块内定义：

const appRoutes: Routes = [
  {  path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [UserAccountService],
  bootstrap: [AppComponent]
})

在index.html 中我定义了我的

我是不是忘记了什么？我不知道如何让它正常工作......

您可以使用箭头功能来确保您仍然可以引用this它是LoginComponent实例：

....subscribe((data) => this.loginCallback(data));

另一种选择是使用绑定方法，例如：

....subscribe(this.loginCallback.bind(this));

或者在构造函数中：

this.loginCallback = this.loginCallback.bind(this);

另一种选择是在您的loginCallback:

private loginCallback = (data: any) => {
  ...
}