Angular 9:使用相同的组件进行用户创建和用户编辑

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from 'app/services/user.service';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {
  userId: number;
  user: User;

  constructor(private route: ActivatedRoute, private userService: UserService) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.userId = +params['id']; // 获取路由参数中的用户ID

      if (this.userId) {
        // 编辑用户
        this.userService.getUser(this.userId).subscribe(user => {
          this.user = user;
        });
      } else {
        // 创建用户
        this.user = new User();
      }
    });
  }

  saveUser() {
    if (this.userId) {
      // 更新用户
      this.userService.updateUser(this.userId, this.user).subscribe(() => {
        // 更新成功后的操作
      });
    } else {
      // 创建用户
      this.userService.createUser(this.user).subscribe(() => {
        // 创建成功后的操作
      });
    }
  }
}