如何解决如何通过navigationByUrl传递值索引
我已经在首页中创建了两个组件，其中将显示有关员工的详细信息，并查看将显示有关员工的完整详细信息。
我的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>
<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","email": "Amogh@gmail.com","firstName": "Harsha","lastName": "H A","email": "Harsha@gmail.com","department": "IT"
}
]
请帮助。
解决方法
您可以这样传递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，我在codeandbox上对其进行了更改，以使其正常工作。
- 视图组件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];
});
}
只需跟随以下视频：link
正是在说明您要使用角度路由器实现的目标。
编辑：
您也可以访问此演示：link，并注意hero-list组件和hero-detail组件之间的关系，它们都在heros文件夹中。
例如，在演示应用程序中，如果单击heroes，则导航到hero-list组件，然后，如果单击Dr Nice，例如：
您导航到hero-detail组件，但具有与Dr Nice对应的数据：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
