Angular 5中如何根据路由在表单组件加载不同按钮

这问题我做MEAN栈CRUD项目时也碰到过，其实借助Angular的ActivatedRoute服务就能轻松区分路由状态，进而渲染对应的按钮。下面是具体实现步骤：

1. 注入路由服务并判断模式 #

首先在StudentFormComponent中导入并注入ActivatedRoute，通过它获取当前路由的参数或路径信息，以此判断是添加模式还是编辑模式。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
// 按需导入你的学生模型和服务
// import { Student } from '../models/student.model';
// import { StudentService } from '../services/student.service';

@Component({
  selector: 'app-student-form',
  templateUrl: './student-form.component.html',
  styleUrls: ['./student-form.component.css']
})
export class StudentFormComponent implements OnInit {
  isEditMode = false;
  // student: Student = {} as Student; // 用于绑定表单数据

  constructor(
    private route: ActivatedRoute,
    // private studentService: StudentService // 按需注入服务
  ) { }

  ngOnInit(): void {
    // 通过路由参数判断是否为编辑模式（edit路由带:id参数）
    this.route.paramMap.subscribe(params => {
      this.isEditMode = params.has('id');
      
      // 如果是编辑模式，根据id获取学生数据填充表单
      if (this.isEditMode) {
        const studentId = params.get('id');
        // this.studentService.getStudent(studentId!).subscribe(data => {
        //   this.student = data;
        // });
      }
    });
  }

  onSubmit(formValue: any): void {
    if (this.isEditMode) {
      // 执行编辑保存逻辑
      // const studentId = this.route.snapshot.paramMap.get('id');
      // this.studentService.updateStudent(studentId!, formValue).subscribe(...);
    } else {
      // 执行添加新学生逻辑
      // this.studentService.addStudent(formValue).subscribe(...);
    }
  }
}

2. 在模板中条件渲染按钮 #

利用Angular的*ngIf指令，根据isEditMode的值显示对应的按钮：

<form (ngSubmit)="onSubmit(studentForm.value)" #studentForm="ngForm">
  <!-- 表单控件示例 -->
  <div>
    <label>姓名:</label>
    <input type="text" name="name" [(ngModel)]="student.name" required>
  </div>
  <div>
    <label>年龄:</label>
    <input type="number" name="age" [(ngModel)]="student.age" required>
  </div>

  <!-- 条件显示按钮 -->
  <button type="submit" *ngIf="!isEditMode" class="btn-add">添加学生</button>
  <button type="submit" *ngIf="isEditMode" class="btn-save">保存编辑</button>
</form>

小提示 #

看你的路由配置里写的是ModalityFormComponent，应该是笔误吧？实际应该对应StudentFormComponent，记得修正路由配置：

// 正确的路由配置示例
const routes: Routes = [
  // 其他路由...
  { path: 'add', component: StudentFormComponent },
  { path: 'edit/:id', component: StudentFormComponent }
];

另外，如果你不想通过参数判断，也可以直接监听路由路径：

this.route.url.subscribe(segments => {
  this.isEditMode = segments[0].path === 'edit';
});

内容的提问来源于stack exchange，提问作者Mahmoud Badreddine