Angular构造函数已注入Router 调用时this.router为undefined无法跳转

问题原因 #

你在login.component.html里直接把login方法作为输入属性传给子组件时，方法的this上下文丢失了。当子组件调用clickLoginFunction时，this指向的是LoginBoxComponent的实例，而非父组件LoginComponent的实例，自然取不到父组件注入的router属性。

解决方案 #

方案1：手动绑定正确的this上下文 #

你可以任选一种方式修正上下文指向：

• 方式1：传值时用bind绑定父组件实例
  修改login.component.html代码：

<div class="text-center" style="width: 100%">
    <loginbox [clickLoginFunction]="login.bind(this)"></loginbox>
</div>

• 方式2：父组件方法定义为箭头函数，自动绑定this
  修改login.component.ts的login方法定义：

login = (username : string, password: string): void => {
  console.log(username);
  console.log(this.router);
  this.router.navigate(['/home']);
}

方案2：改用@Output事件传递（更符合Angular最佳实践） #

父组件直接将方法作为输入传给子组件的写法耦合度较高，更推荐用事件回调实现：

1. 修改LoginBoxComponent，将输入属性替换为输出事件

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
  selector: 'loginbox',
  templateUrl: './loginbox.component.html',
  styleUrls:['./loginbox.component.css']
})
export class LoginBoxComponent implements OnInit {
  
  @Output()
  loginSubmit = new EventEmitter<{emailOrUsername: string, password: string}>();
  
  emailOrUsername!: string;
  password!: string;

  constructor() {
   }
  
  ngOnInit(): void {
  }

  loginClick(){
    console.log("Internal function call in component");
    
    if(this.emailOrUsername === undefined || this.emailOrUsername === ''){
      this.showErrorModelInRegister('No se han introducido usuario');
      return;
    } else if (this.password === undefined || this.password === ''){
      this.showErrorModelInRegister('No se ha introducido password');
      return;
    }
    this.loginSubmit.emit({emailOrUsername: this.emailOrUsername, password: this.password});
  }

  private showErrorModelInRegister(message:string){
    Swal.fire(message);
  }
}

2. 修改login.component.html，监听子组件的输出事件

<div class="text-center" style="width: 100%">
    <loginbox (loginSubmit)="login($event.emailOrUsername, $event.password)"></loginbox>
</div>

这种写法不需要手动处理this绑定，Angular事件回调默认的上下文就是当前组件实例，不会出现this.router为undefined的问题。

额外优化建议 #

你当前在loginbox.component.html里给submit按钮绑定了click事件，原生form表单的默认提交行为会触发页面刷新，建议改为给form标签绑定ngSubmit事件：

<form (ngSubmit)="loginClick()">
  <!-- 其余表单内容保持不变 -->
  <div class="mt-3">
    <input type="submit" class="fadeIn fourth mt-4 mb-4" value="Log In">
  </div>
</form>

这样可以避免意外的页面刷新问题。

内容的提问来源于stack exchange，提问作者Gabriel García Garrido