在表单提交时进行Angular 8深层链接

Question

我在Angular 8中浏览了几篇有关深层链接的文章，但是还没有找到解决我的问题的更好的方法。

问题要求：enter image description here

请参阅上面的屏幕截图。我有一个简单的Angular应用程序，其中有两个小部件Form Widget和Table Widget。表格小部件由“表单”小部件中执行的搜索驱动浏览器中的网址是“ localhost / dashboard / widget / actionForm”

1. 执行表单搜索时。我希望表单数据成为URL的一部分，例如“本地主机/仪表板/小部件/ actionForm； Param_A = test1； Param_B = test2”以及要动态更新的表小部件

2. 当我复制URL“ localhost / dashboard / widget / actionForm; Param_A = test1; Param_B = test2”并在新的浏览器中启动它时。它应该能够使用url中的参数来返回表单状态。

这只是一个例子。在理想情况下，表单中会有很多参数。

注意：URL参数也需要进行编码。但是我想这是一个简单的问题要解决。

Answer 1

1. url字符有限制，取决于各种参数。您可以检查here

2. 执行搜索时，这些参数应附加到url：

      this.router.navigate([], {
           queryParams: {
               _t: param1,
               _t2: param2
           }
       });
   

3. 当您重新加载url时，您应该可以使用以下参数：

   this.route.queryParamMap.subscribe(params => {
       let t= params.get('_t');
       //.... so on
       pass this to table widget
   });
   

4. 如果您的参数长于字符限制，并且您想要在同一浏览器上维护会话，则可以始终使用本地存储和会话存储