如何通过 navigateByUrl 传递值（索引）

Question

我创建了两个组件主页，我将在其中显示有关员工的详细信息，并查看我将在其中显示有关员工的完整详细信息的位置。

我的home.component.html如下：

<header>Welcome Home</header>
<br>
<div class="container panel panel-default" *ngFor="let employee of employeeList;">
 <div class="panel-heading">
  <h3 class="panel-title">{{employee.firstName}} {{employee.lastName}}</h3>
 </div>
 <div class="panel-body">
  <div class="col-xs-10">
   <div class="row vertical-align">
    <div class="col-xs-8 offset-md-2">
     <div class="row">
      <div class="col-xs-6">
       First Name
      </div>
      <div class="col-xs-6">
       {{employee.firstName}}
      </div>
     </div>
     <div class="row">
      <div class="col-xs-6">
       Last Name
      </div>
      <div class="col-xs-6">
       : {{employee.lastName}}
      </div>
     </div>
     <div class="row">
      <div class="col-xs-6">
       Gender
      </div>
      <div class="col-xs-6">
       : {{employee.gender}}
      </div>
     </div>
     <div class="row">
      <div class="col-xs-6">
       Department
      </div>
      <div class="col-xs-6">
       : {{employee.department}}
      </div>
     </div>
     <div>
      <button class="btn btn-primary" (click)="viewEmployee(employee.id)">
       View
      </button>
      &nbsp;
      <button class="btn btn-primary" (click)="editEmployee(employee.id)">
       Edit
      </button>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

我的home.component.ts如下：

import { Component, NgModule, OnInit } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import employees from './../employeeDetails/employees.json';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  constructor(private router: Router) {
  }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;
  ngOnInit(): void {

  }

  viewEmployee(id): any {
    this.router.navigateByUrl('/view');
  }

  editEmployee(i): any {
    this.router.navigateByUrl('/edit');
  }
}

当我单击主页组件中的可用按钮时，它必须带有员工的索引或 ID。并仅显示有关该员工的特定详细信息。目前，当我点击查看按钮时，它正在显示所有员工的所有详细信息。

我的view.component.html如下：

<header>View Page</header>
<br>
<div class="container panel panel-default" *ngFor="let employee of employeeList;">
    <div class="panel-heading">
        <h3 class="panel-title">{{employee.firstName}} {{employee.lastName}}</h3>
    </div>
    <div class="panel-body">

        <div class="col-xs-10">
            <div class="row vertical-align">

                <div class="col-xs-8 offset-md-2">

                    <div class="row">
                        <div class="col-xs-6">
                            First Name
                        </div>
                        <div class="col-xs-6">
                            : {{employee.firstName}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Last Name
                        </div>
                        <div class="col-xs-6">
                            : {{employee.lastName}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Gender
                        </div>
                        <div class="col-xs-6">
                            : {{employee.gender}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Age
                        </div>
                        <div class="col-xs-6">
                            : {{employee.age}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Email
                        </div>
                        <div class="col-xs-6">
                            : {{employee.email}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Phone Number
                        </div>
                        <div class="col-xs-6">
                            : {{employee.phoneNumber}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            Department
                        </div>
                        <div class="col-xs-6">
                            : {{employee.department}}
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-primary" (click)="editEmployee()">Edit</button>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

我的view.comonent.ts如下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import employees from './../employeeDetails/employees.json';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {

  constructor(private router: Router) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;
  ngOnInit(): void {
  }
  editEmployee(): any {
    this.router.navigateByUrl('/edit');
  }
}

我总共有 3 名员工，我在employee.json 文件中指定了这些员工。如下：

[
    {
        "id": 1,
        "firstName": "Abhi",
        "lastName": "A B",
        "gender": "male",
        "age": 25,
        "email": "Abhi@gmail.com",
        "phoneNumber": 8888888888,
        "department": "IT"
    },
    {
        "id": 1,
        "firstName": "Amogh",
        "lastName": "A M",
        "gender": "male",
        "age": 25,
        "email": "Amogh@gmail.com",
        "phoneNumber": 8888888888,
        "department": "IT"
    },
    {
        "id": 1,
        "firstName": "Harsha",
        "lastName": "H A",
        "gender": "male",
        "age": 25,
        "email": "Harsha@gmail.com",
        "phoneNumber": 8888888888,
        "department": "IT"
    }
]

请帮忙。

Answer 1

你可以这样传递 id：

this.router.navigateByUrl(`/view/${id}`);

然后在视图组件上得到它是这样的：

constructor(private router: Router, private route: ActivatedRoute) { }
///
ngOnInit() {
   this.route.params.subscribe((params) => {
      const employeeId = params.id;
    });
}

这是一个可能对您有所帮助的代码沙箱：https://codesandbox.io/s/flamboyant-rubin-x2fuc?file=/src/app/view/view.component.ts

要点：

• json 文件的所有员工的 id 为 1，我在代码框上更改了它以使其正常工作。
• 视图组件 html 不应包含 ngFor，因为您只希望该视图上有一名员工。

*ngFor="let employee of employeeList;

我从 view.component.html 的沙箱中删除了这个

• 这是答案的核心。添加一个局部变量来存储员工，然后使用 params 中的 id 从 json 中对其进行过滤。

  employee;
  
  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      const employeeId = params.id;
      this.employee = employees.filter((e) => e.id === +employeeId)[0];
    });
  }

Answer 2

跟随这个视频：link
它准确地解释了你想用角度路由器实现什么。

编辑：

您也可以访问这个演示：link，并注意hero-list 组件和hero-detail 组件之间的关系，它们都在英雄文件夹中。
例如，在演示应用程序中，如果您点击 heroes，您将导航到 hero-list 组件，然后如果您点击 Dr Nice，例如：

您导航到hero-detail 组件，但数据对应于Dr Nice：