Angular 8后退按钮和参数

Question

我有一个应用程序，当单击浏览器后退按钮时，我需要获取导航路径的一些参数。我有主视图，我有Datefrom和DateTo。从主视图导航到目录时，我传递了Datefrom和DateTo参数。我在新路线上成功收到了它们。但是，当我单击“后退”按钮时，如何在主视图中（以前的路线）接收datefrom和dateto？这是我的问题所在的stackblitz？

Answer 1

单向：使用this.router.navigateByUrl（'/ catelog'，{状态：{dateFromVariable：dateFrominputValue，dateToVariable：dateToInputvalue}}）;在home的ts组件的navigation（）中，以在使用“状态”对象切换路由时保留dateFrom和dateTo变量的状态。

第二种方式：在html模板中使用[state] =“ {dateFromVariable：dateFrominputValue，dateToVariable：dateToInputvalue}。

您可以使用window.history.state属性读取值。

Answer 2

技术上，后退按钮刷新页面。因此，要保存日期，您需要执行以下两种选择之一：1）sessionStorage用于存储和检索数据（在检索时保存它，如果不存在，则从会话存储中获取它）。

let fromAndTodates = [];
if (dates) {
  sessionStorage.setItem('dates', JSON.stringify(dates));
  fromAndTodates = dates;
} else {
  fromAndTodates = JSON.parse(sessionStorage.getItem('dates'));
}

2）将其另存为所有页面的查询参数（我已经看到您已经在一页中执行了此操作），因此，如果用户尝试返回，他仍然可以从URL中获取数据。

export class HomeViewComponent {
  dates;

  constructor(
    private actR: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    this.dates = this.actR.queryParams;
  }

  navigate(url) {
     this.router.navigate([
      url,
      {
        dateFrom: this.dateFrom.valueOf(),
        dateTo: this.dateTo.valueOf()
      }
    ]);
  }
}