Встраиваемый в Angular2 Router не установлен

Question

если я вставляю маршрутизатор из @ углового/маршрутизатора в компонент, а затем использую его, я получаю сообщение об ошибке, которое не может вызвать 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)); 

или застройщик:

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

Еще один вариант использования функции стрелка в ваш loginCallback:

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