如何返回到上一页，在那里已经在Angular中选择了一些数据

Question

我有一个页面"组织；我在那里得到了一个组织的列表。在选择其中一个组织时，我会在一张表中列出该组织的员工名单。

在选择其中一名员工时，我被重定向到另一个页面，"；员工信息；在那里我可以看到员工的信息。给，我有一个后退按钮。

单击后退按钮后，我想从"；员工信息"；页面到"；组织；页面，我在其中选择了组织和基于该组织的员工名单。

我怎样才能做到这一点？

organization.component.html

<form [formGroup]="organisationForm">
<div class="form-group row">
<div class="col-md-6 txt-box">
<div class="runTextBox">
<select class="form-control"  (change)="onChangeOrg($event.target.value)"
formControlName="OrgName" [compareWith]="compareOrgState">
<option hidden value="" disabled="true">Please select Organisation</option>
<option *ngFor="let name of getOrgInfo" type="number"                 
[ngValue]="name.Id"> {{ name.OrgName }}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list_table">
<table class="table tabs links">
<thead>
<tr>
<th>Employees</th>
<th></th>

</tr>
</thead>
<tbody>                    
<tr *ngFor="let info of getEmpInfo">                      
<td (click)="view(info.EmpId)">
{{ info.EmpName }}
</td>                     
<td class="tr">
<a> <i class="fa fa-info pr" aria-hidden="true"></i></a>
</td>                     
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>

organization.ts文件

ngOnInit(): void {    
this.organisationForm = this.fb.group({
OrgName: [""]
});
this.fetchOrgList();  
}
fetchOrgList() {
this.service.getOrgList().subscribe((res: any) => {     
this.getOrgInfo = res;     
});
}
onChangeOrg(value) {   
this.orgName = value
this.service.getEmpByOrg(value).subscribe((res: any) => {
this.getEmpInfo = res;    
});
}
view(v) {    
this.router.navigate(["/dashboard/employee-info/" + v]);  }

在"；员工信息"；页面，当我单击后退按钮时，整个页面都会刷新。如何在组织页面中获取所选组织名称及其相应的员工列表？

Answer 1

理想情况下，您应该使用ngrx状态管理。但是，作为解决方案，您可以在"导航到员工信息"时将"选定的组织"作为"数据"发送，将其存储在变量中，然后在进行反击时，在"导航至组织"时再次将其作为"数据"发送，在ngOnInit上，检查"路线数据"，将其值设置为下拉列表。比如当你发送到"员工信息"时：

this.router.navigate(["/dashboard/employee-info/" + v], , { state: { organisation: 'your selected organisation' });  }

然后，在employee.ts中，在ngOnInit或constructor:中

this.router.getCurrentNavigation().extras.state.organisation;

或history.state.data

这应该会让你选择的组织在反击的同时也这样做。