1. 创建一个名为“edit-component”的组件，用于显示和编辑数据。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DataService } from '../data.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-edit-component',
  templateUrl: './edit.component.html',
})
export class EditComponent implements OnInit {

  id: number;
  dataForm: FormGroup;

  constructor(private route: ActivatedRoute, private router: Router, private dataService: DataService) { }

  ngOnInit() {
    this.dataForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'phone': new FormControl(null, Validators.required)
    });

    this.route.params.subscribe(params => {
      this.id = +params['id'];
      const data = this.dataService.getDataById(this.id);
      this.dataForm.setValue({
        'name': data.name,
        'email': data.email,
        'phone': data.phone
      });
    });
  }

  onSubmit() {
    this.dataService.updateData(this.id, this.dataForm.value);
    this.router.navigate(['/list-component']);
  }

}

2. 创建一个名为“list-component”的组件，用于显示数据及编辑和删除数据。

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list-component',
  templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {

  data: any[];

  constructor(private dataService: DataService, private router: Router) { }

  ngOnInit() {
    this.data = this.dataService.getData();
  }

  onEdit(id: number) {
    this.router.navigate(['/edit-component', id]);
  }

  onDelete(id: number) {
    this.dataService.deleteData(id);
    this.ngOnInit();
  }

}

3. 在“list-component”的HTML文件中添加以下内容，以显示每条数据，并在每