при нажатии кнопки дочерний путь не был направлен на указанный компонент c

Question

В моем демонстрационном приложении у меня есть следующий дочерний путь, определенный в app-routing.module.ts .

  routes: Routes = [
    { path: '', redirectTo: 'employees', pathMatch: 'full' },
    {
      path: 'employees',
      component: ListEmployeeComponent,
      children: [
        { path: '', component: ListEmployeeComponent },
        { path: ':id/edit', component: EditEmployeeComponent },
        { path: ':id/employee-details', component: EmployeeDetailsComponent },
        { path: ':id/delete-employee', component: DeleteEmployeeComponent },
      ],
    },
    { path: 'add-employee', component: AddEmployeeComponent },
  ];

У меня есть страница, на которой я показываю список сотрудников с aa обеспечение обновления, удаления и просмотра реквизитов сотрудника. list-emplyee.component. html:

<tbody>
  <tr *ngFor="let employee of employees;let i = index">
    <td>{{employee.firstName}}</td>
    <td>{{employee.lastName}}</td>
    <td>{{employee.email}}</td>
    <td>{{employee.mobileNumber}}</td>
    <td>
      <button class="btn btn-success" (click)="onUpdate(employee.id)">Update</button>
      <button class="btn btn-danger" style="margin-left: 10px" (click)="onDelete(employee.id)">Delete</button>
      <button class="btn btn-info" style="margin-left: 10px" (click)="onDetails(employee.id)">Details</button>
    </td>
  </tr>
</tbody>

list-employee.component.ts :

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-list-employee',
  templateUrl: './list-employee.component.html',
  styleUrls: ['./list-employee.component.css']
})
export class ListEmployeeComponent implements OnInit {
 employees:Employee[];
  constructor(private employeeService:EmployeeService,
    private route:Router,
    private activeRoute:ActivatedRoute) { }
  
  ngOnInit(): void {
    this.reloadEmployee();
  }
  reloadEmployee(){
    this.employeeService.getEmployees().subscribe(
    (data)=>{
     this.employees=data.map(
       e=>{
         return{
           id: e.payload.doc.id ,
           ...e.payload.doc.data() as Employee
         } ;
       }
     )
     
      
    }
    );

  }
  onUpdate(id:number){
    console.log('id::'+id);
    this.route.navigate([id,'edit'],{relativeTo:this.activeRoute});
    

  }  
  onDelete(id:number){
    console.log('id::'+id);
    this.route.navigate([id,'delete-employee'],{relativeTo:this.activeRoute});  

  }  
  onDetails(id:number){
    console.log('id::'+id);
    this.route.navigate([id,'employee-details'],{relativeTo:this.activeRoute});  

  } 

}

Когда я нажал кнопку обновления / удаления или подробностей, он не направит меня к указанному компоненту c.

Answer 1

Это потому, что в list-emplyee.component отсутствует объявление route-outlet . html

<tbody>
          <tr *ngFor="let employee of employees;let i = index">
            <td>{{employee.firstName}}</td>
            <td>{{employee.lastName}}</td>
            <td>{{employee.email}}</td>
            <td>{{employee.mobileNumber}}</td>
            <td>
              <button  class="btn btn-success" (click)="onUpdate(employee.id)">Update</button>
              <button  class="btn btn-danger" style="margin-left: 10px" (click)="onDelete(employee.id)">Delete</button>
                <button  class="btn btn-info" style="margin-left: 10px" (click)="onDetails(employee.id)">Details</button>
            </td>
          </tr>
</tbody>


<router-outlet><router-outlet>       <!-- this will be responsible for loading child components or child routing -->