TypeError: Cannot read property '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

您必须在 .then 的 success 和 catch 回调中使用 Arrow function 而不是 function。由于在 success 和 catch 回调 function 中，您正在丢失组件 this(context).

代码

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']);
   }
)

TypeError: Cannot read property 'router' of null Angular2 Router

TypeError: Cannot read property 'router' of null Angular2 Router

routing

router

angular2-routing

angular2-router3

angular