TypeError: Невозможно прочитать свойство 'router' of null Angular2 Router

Question

Ниже мой компонент. Точка ошибки - часть this.router.navigate(). После входа в систему я хочу перенаправить пользователя на другую страницу, что-то похожее на $state.go('dashboard').

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { AngularFire } from 'angularfire2'; 

@Component({ 
    templateUrl: 'app/auth/login.component.html' 
}) 

export class LoginComponent { 
    constructor(private af: AngularFire, private router: Router) { } 
    onSubmit(formData) { 
    if(formData.valid) { 
     console.log(formData.value); 
     this.af.auth.login({ 
     email: formData.value.email, 
     password: formData.value.password 
     }).then(function(success) { 
     console.log(success); 
     this.router.navigate(['/dashboard']); 
     }).catch(function(err) { 
     console.log(err); 
     this.router.navigate(['/dashboard']); 
     }) 
    } 
    } 
} 

И я продолжаю получать эту ошибку. Пожалуйста, просветите меня, что я делаю неправильно?

Answer 1

Вы должны использовать Arrow function вместо function внутри .then «s success & catch обратного вызова х. В связи с чем внутри success & catch callback function Вы теряете компонент this (контекст).

Код

this.af.auth.login({ 
    email: formData.value.email, 
    password: formData.value.password 
}).then(
    //used Arrow function here 
    (success)=> { 
     console.log(success); 
     this.router.navigate(['/dashboard']); 
    } 
).catch(
    //used Arrow function here 
    (err)=> { 
     console.log(err); 
     this.router.navigate(['/dashboard']); 
    } 
)