Angular中通过路由管理数据的问题

Question

我是Angular的初学者。

在没有路由的情况下，我的代码在CRUD操作中运行良好。

但是当我添加路由时，我无法在另一页的内容表中看到增加的值。

可能是组件之间的内部通信问题。我不知道如何解决这个问题。

这是我的HomeComponent .ts

export class HomeComponent implements OnInit {

  constructor(private router:Router) { }

  name:string;
  DOB:number;
  mob:number;
  gender:string;
  title = 'Employee Information';


  employees = [
    {name:"Sikandar",DOB:"22-02-1996",mob:"4558965214",gender:"male"},
    {name:"Alex",DOB:"23-03-1995",mob:"4558965214",gender:"female"},
    {name:"Maria",DOB:"24-02-1994",mob:"9558965214",gender:"male"}
  ];
  model:any={};
  model2:any={};
  msg:any="";
  addEmployee(){
    this.employees.push(this.model);
    console.log(this.model);
    this.model = {};
   this.msg = "Record is successfully added..... "; 
  }

这是我的ContentsComponent.ts

export class ContentsComponent implements OnInit {
  employees = [
    {name:"Sikandar",DOB:"22-02-1996",mob:"4558965214",gender:"male"},
    {name:"Alex",DOB:"23-03-1995",mob:"4558965214",gender:"female"},
    {name:"Maria",DOB:"24-02-1994",mob:"9558965214",gender:"male"}
  ];
  model:any={};
  model2:any={};
  msg:any="";

  private servers: {id: number, name: string, status: string}[] = [];

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

  ngOnInit() {
    //this.servers = this.serversService.getEmplyee();
  }
  onReload(){
    this.router.navigate(['contents'],{relativeTo:this.route});
  }

  // getEmployee(){
  //   return this.employees;
  // }

  deleteEmployee(i){
    this.employees.splice(i,1);
    this.msg = "Record is successfully deleted..... ";    
  }

  myValue;
  editEmployee(k){
    this.model2.name = this.employees[k].name;
    this.model2.DOB=this.employees[k].DOB;
    this.model2.mob = this.employees[k].mob;
    this.model2.gender=this.employees[k].gender;
    // console.log(this.model.gender);
    this.myValue = k;

  }
  updateEmployee(){
    let k= this.myValue;
    this.model.gender = "female";
    for(let i=0; i<this.employees.length;i++){
      if(i==k){
        this.employees[i]= this.model2;
        this.model2 = {};       
        this.msg = "Record is successfully updated..... ";
      }
    }
  }

Answer 1

欢迎使用StackOverflow和angular社区。您需要创建一个将发出数据的服务，也可以将employees对象存储到本地存储中，并在更改路线时读取