如何在URL参数中存储UI详细信息？

Question

使用Angular，我有两个显示页面的URL。

• 应用程序/学生/列表---显示学生列表
• app / students /：id ---显示ID为ID的学生的详细信息

假设我有动态标签。当我从列表中单击一个学生时，将打开一个包含该学生详细信息的新标签。 因此，当我呼叫应用程序/学生/列表时，将显示以下内容。

当我单击Sam时，请致电app / students / 2，然后将打开一个新标签，其中包含Sam的详细信息。

我可以单击“学生列表”选项卡，然后单击“ Sally”以打开一个新的选项卡，以获取Sally的详细信息，依此类推...

但是，如果在单击Sam之后刷新页面并显示Sam的详细信息，则学生列表将消失。 如何在URL中包含选项卡状态，以及如何刷新当前URL，显示相同的选项卡状态（将显示“学生列表”选项卡和“ Sam”的选项卡）

Answer 1

StackBlitz link的完整工作演示。.

如果要在重新加载页面时保留状态，则可以使用角度路由器。我在这里不打算实现选项卡的动态部分。单击学生列表的特定行时，将触发此事件。

clickRow(index, tabGroup){
     this.rowData = this.studentService.studentsData.filter( data => data.id === index + 1 );
     this.rowData = {...this.rowData[0]};

     tabGroup.selectedIndex = 1
     this.router.navigate(['student', {queryParams: JSON.stringify( this.rowData) }]);
}

然后您可以像这样在页面重新加载上获取数据...

ngOnInit() {
   this.studentData = this.studentService.studentsData;
   this.activatedRouter.params.subscribe(data =>{
     this.rowData = JSON.parse(data['queryParams'])
   })
}