角度：编辑用户个人资料时，应用程序导航到主页

我有两个组成部分：家庭和管理员。在主页组件中，我可以创建，删除和编辑帖子。在管理员上，我确实完全一样，但是使用了另一个数据库集合（我正在使用FireBase）。但是我不了解这种行为：当我单击以编辑员工时，路由器导航到家中。在编辑帖子（主页）时，一切看起来都很好。这两个组件的代码实际上是相同的：

管理员

user: Users[];
  show = false;
  employees: Users = {
    id: '',
    userName: '',
    phone: '',
    role: '',
    name: '',
  };

  edit = false;
  employeeToEdit: Users;

  constructor(private userService: UsersService) {

  }

  ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.user = data;
      console.log(this.user);
    });
  }

  addEmployee(item: Users) {
    if (this.employees.userName !== "" && this.employees.phone !== "" && this.employees.role !== ""
      && this.employees.name !==  "") {
      this.userService.addUser(this.employees);
    }else{
     this.show = true;
      setTimeout(function () {
        this.show = false;
      }.bind(this), 3000);
    }
    }


  deleteItem(event, item: Users) {
    this.clearStateE();
    this.userService.deleteUser(item);
  }

  editEmployee(event, item: Users) {
    this.edit = true;
    this.employeeToEdit = item;
  }

  updateItem(item: Users) {
    this.userService.updateUser(item);
    this.clearStateE();
  }

  clearStateE() {
    this.edit = false;
    this.employeeToEdit = null;
  }

HTML：

<h1>Employees</h1>
<div class="card">
  <div class="card-content">
    <span class="card-title">Add Item</span>
    <form (ngSubmit)="addEmployee()" class="col s6">
      <div class="row">

        <div class="input-field col s6">
          <input type="text" placeholder="Add Description" [(ngModel)]="employees.userName" name="description">

        </div>
        <div class="input-field col s6">
          <input type="text" placeholder="Add Description" [(ngModel)]="employees.phone" name="description">

        </div>
        <div class="input-field col s6">
          <input type="text" placeholder="Add Description" [(ngModel)]="employees.role" name="description">

        </div>

      <div *ngIf="show" class="alert alert-danger" role="alert">
        All fields are requiered
      </div>
    </form>
  </div>
</div>


<ul *ngFor="let employee of user" class="collection">
  <li class="collection-item"><strong>{{employee.name}}: </strong> {{employee.phone}} <a href="#" class="secondary-content">
<i (click)="editEmployee($event, employee)" class="fa fa-pencil"></i>
<i *ngIf="edit && employeeToEdit.id == employee.id" (click)="clearStateE()" class="fa fa-compress"></i>
    </a>

<div *ngIf="edit && employeeToEdit.id == employee.id">
      <form (ngSubmit)="updateItem(employee)">
        <div class="row">
          <div class="input-field col s6">
            <input type="text" placeholder="Add Title" [(ngModel)]="employee.name" name="title">
          </div>
          <div class="input-field col s6">
            <input type="text" placeholder="Add Description" [(ngModel)]="employee.phone" name="description">
          </div>
          <div class="input-field col s6">
            <input type="text" placeholder="Add Date" [(ngModel)]="employee.userName" name="description">
          </div>
          <input type="submit" value="Update Item" class="btn orange">
          <button (click)="deleteItem($event, employee)" class="btn red">Delete Item</button>
        </div>
      </form>
    </div>

  </li>
</ul>

Routing.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AdminComponent } from './components/admin/admin.component';

const routes: Routes = [
  {
    path: 'admin', component: AdminComponent
  },
  {
    path: '**',
    component: HomeComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

在两个组件之间导航时发生的另一件事是，检索到的数据不再存在（仅当我插入另一个组件时才显示列表）。有人可以帮我吗？

编辑：我尝试过这样的事情，但仍然无法正常工作

const routes: Routes = [
  {
    path: "admin",
    component: AdminComponent
  },
  {
    path: "**",
    redirectTo: "home"

  },
  {
    path: "home",
    component: HomeComponent

  }