TypeError：nullのプロパティ 'router'を読み取ることができません。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

あなたは.thenのsuccess & catchコールバックの内側にArrow functionの代わりfunctionを使用する必要があります。そのため、successcatchコールバック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']); 
    } 
)