Angular12项目点击登录按钮后无法跳转到home页面问题求助

问题根因及修复方案 #

1. 表单默认提交行为触发页面刷新 #

你的登录按钮是type="submit"，放在<form>标签内，点击后会触发浏览器默认的表单提交行为，导致页面刷新，打断Angular的路由跳转逻辑。
修复方式：在点击事件里阻止默认行为，修改loginbox.component.html的登录按钮代码：

<input type="submit" class="fadeIn fourth mt-4 mb-4" value="Log In" (click)="loginClick($event)">

然后修改loginbox.component.ts的loginClick方法：

loginClick(e: Event){
  e.preventDefault(); // 阻止表单默认提交
  // 其余原有逻辑保持不变
}

2. 输入框未做双向绑定，无法获取用户输入内容 #

你定义的emailOrUsername和password变量没有和页面输入框绑定，不管用户输入什么值，两个变量都为undefined，会直接触发空值校验弹窗，根本执行不到调用clickLoginFunction的逻辑。
修复方式：给两个输入框加上[(ngModel)]双向绑定，修改loginbox.component.html的输入框代码：

<input type="text" id="login" class="fadeIn second" name="login" placeholder="username" [(ngModel)]="emailOrUsername">
<input type="text" id="password" class="fadeIn third" name="login" placeholder="password" [(ngModel)]="password">

注意：如果你的项目没有导入FormsModule，需要在对应的模块文件里导入FormsModule，否则双向绑定不生效。

3. 父组件传递方法时丢失this指向 #

你在父组件login.component.html里直接传递login方法给子组件，方法执行时this会指向子组件实例，而子组件没有注入Router，调用this.router.navigate会抛出异常。
修复方式：传递方法时绑定this，修改login.component.html代码：

<loginbox [clickLoginFunction]="login.bind(this)"></loginbox>

也可以在父组件里把login方法定义为箭头函数，保留正确的this指向：

// login.component.ts
login = (): void => {
  console.log("HOLA");
  this.router.navigate(['/home']);
}

三个问题修复后即可正常跳转。

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