TypeError：无法读取null Angular2 Router的属性’router’

发布时间：2020-12-17 06:53:32 所属栏目：安全来源：网络整理

导读：以下是我的组件.错误点是this.router.navigate()部分.登录后,我想将用户重定向到另一个页面,类似于$state.go(‘dashboard’). import { Component } from '@angular/core';import { Router } from '@angular/router';import { AngularFire } from 'angularfi

以下是我的组件.错误点是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']);
      })
    }
  }
}

而且我一直收到这个错误.请赐教,我做错了什么？

enter image description here

解决方法

你必须使用箭头功能而不是内部功能.然后才能成功.赶上回调??.由于哪个内部成功&捕获回调函数你正在丢失组件(上下文).

码

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!