Angular2を注入したルータが未定義

Question

@ angle/routerからルータにコンポーネントを挿入して使用すると、undefinedのnavigateByUrlを呼び出せないというエラーが表示されます。

これは私がルータインスタンスを使用するコンポーネントです：

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の内側に、私は私の

を定義します私は何かを忘れましたか？私はそれが正常に働いて取得する方法には何の手掛かりを...持っていない

Answer 1

あなたはまだthisへの参照を持つことができることを確認するには、矢印の機能を使用することができ、それがLoginComponentインスタンスです：

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

別のオプション

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

またはコンストラクタで：使用bindメソッドは次のようである

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

もう一つの選択肢は、内の矢印機能を使用しているあなたのloginCallback：あなたは `loginCallback`を呼び出している

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