如何在Angular 4中让按钮click事件先于routerLink执行

你的问题核心是**routerLink会在click事件的异步操作未结束时就触发页面跳转**，导致新创建的教师数据还没完成保存/更新，所以列表页面无法显示最新数据。下面是两种可靠的解决方式：

方式一：手动控制路由跳转（推荐） #

这种方式可以完全掌控操作顺序，确保数据操作完成后再跳转页面：

步骤1：在组件中注入Router #

首先修改组件代码，导入Router并在构造函数中注入：

import { RouterModule, Router } from '@angular/router'; // 新增Router导入
import { Component, OnInit } from '@angular/core'; 
import ITeacherModelAngular from '../Share/ITeacherModelAngular'; 
import { TeacherService } from '../teacher-service.service'; 
import TeacherModel from '../Share/TeacherModel'; 

@Component({ 
selector: 'app-new-teach-form', 
templateUrl: './new-teach-form.component.html', 
styleUrls: ['./new-teach-form.component.css'] 
}) 
export class NewTeachFormComponent implements OnInit { 
teacher: TeacherModel; 

// 新增Router注入
constructor(private service$: TeacherService, private router: Router) { 
this.teacher = new TeacherModel(); 
} 

ngOnInit() { 
} 

步骤2：修改createTeacher方法，完成操作后跳转 #

假设你的service$.createTeacher是异步操作（比如HTTP请求），我们需要在它完成后再执行跳转：

createTeacher() {
  // 等待createTeacher异步操作完成
  this.service$.createTeacher(this.teacher).subscribe({
    next: () => {
      // 更新教师列表数据
      this.service$.getTeacherIndex();
      // 手动跳转到教师列表页
      this.router.navigate(['/teacher']);
    },
    error: (err) => {
      // 可以在这里处理错误，比如提示用户保存失败
      console.error('创建教师失败:', err);
    }
  });
}

如果你的createTeacher是同步操作（比如只是把数据添加到本地数组），可以直接在最后添加跳转：

createTeacher() {
  this.service$.createTeacher(this.teacher);
  this.service$.getTeacherIndex();
  this.router.navigate(['/teacher']);
}

步骤3：修改按钮，移除routerLink #

现在按钮只需要保留click事件即可：

<button class="btn btn-primary" (click)="createTeacher()">Submit</button>

方式二：利用routerLink的延迟跳转（仅适用于同步操作） #

如果你的数据操作是完全同步的，可以通过在click事件中返回true来确保事件先执行，但这种方式无法处理异步场景，所以不推荐：

<button class="btn btn-primary" (click)="createTeacher(); return true;" routerLink='/teacher'>Submit</button>

额外需要修复的表单问题 #

你的表单代码中有一个明显的错误：多个模板引用变量使用了相同的#name（比如姓名、简介、位置等输入框都用了#name="ngModel"）。模板引用变量是唯一的，重复会导致表单验证逻辑混乱，建议修改为不同的名称：

<!-- 姓名输入框 -->
<input required [(ngModel)]=teacher.name name="name" #nameInput="ngModel" id ="name" type="text" class="form-control">
<div class="alert alert-danger" *ngIf="nameInput.touched && !nameInput.valid"> 
 Name is required 
</div> 

<!-- 简介输入框 -->
<textarea [(ngModel)]=teacher.aboutMe name="about" #aboutInput="ngModel" id="about" cols="30" rows="10" class="form-control">
</textarea>

<!-- 位置输入框 -->
<input required [(ngModel)]=teacher.location name="loc" #locInput="ngModel" id="loc" type="text" class="form-control">
<!-- 其他输入框同理修改 -->

这样可以确保每个输入框的验证逻辑独立工作，不会互相干扰。

内容的提问来源于stack exchange，提问作者Wesley Taylor