Angular 单击按钮时，子路径未路由到特定组件

在我的演示应用程序中，我在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 },
  ];

我有一个页面，显示员工列表，提供更新、删除和查看员工详细信息的功能。 列出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>

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});  

  } 

}

---

当我单击“更新/删除”或“详细信息”按钮时，它不会将我发送到特定组件。

这是因为列表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>


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

{{employee.firstName}
{{employee.lastName}
{{employee.email}
{{employee.mobileNumber}
更新
删除
细节

我很高兴这个答案对您有所帮助。快乐编码！