Question

在我执行搜索的程序中，表单已完成（使用反应式表单），提交时，将使用过滤器创建一个json，并将其重定向到另一个页面，并将过滤器作为参数发送。在另一页上，使用rest服务最终显示结果。

当用户单击浏览器的“后退”按钮时，会发生此问题。返回上一页时，过滤器不会保留在表单中。有一些方法可以确保维护这些过滤器

Answer 1

路由器参数如何？它使您的页面可添加书签，并且易于使用前后浏览器按钮。

http://localhost:4200/filter?input1=someData&input2=anotherData

发送表单时，还可以使用参数重定向到同一页面。

Here is a nice article about it

因此，如果您的用户单击一次“后退”，他们将进入带有过滤器的搜索表单。如果他们再次单击“返回”，则它们将为空格式。

如果您不想使用路由器参数，则可以将数据保存在localStorage或sessionStorage中并重新填充过滤器ngOnInit

export class Something implements OnInit {

   ngOnInit() {

      if(localStorage.getItem('search') !== undefined) {
         const filters = JSON.parse(localStorage.getItem('search'));
         // Do someting with it
      }
   }

   search(searchParams) {

      // Save your filters before redirect
      localStorage.setItem('search', JSON.stringify(searchParams));

      // Your code
   }
}

Answer 2

如Haytam95建议的那样，使用参数（而不是queryParams）。但是，我没有重定向到同一页面，而是进行了两次重定向。首先，我使用replaceURL替换空表格。这样，当我返回时，我得到的表格带有最后一个过滤器。

this.router.navigate([],
      {
        queryParams: {filters: btoa(JSON.stringify(filter)), page: 0 },
        relativeTo: this.activatedRoute,
        queryParamsHandling: 'merge',
        replaceUrl: true
       }).then(
        () => {
          this.router.navigate(['/pages/fallos/list'], { queryParams: {filters: btoa(JSON.stringify(filter)), page: 0 } });
        }
       );

在浏览器中重定向和返回时保持表格值

2 个答案: