Angular：如何将应用程序状态放在路由参数（url）上？答案

【问题标题】：Angular: how to put application state on route params (url)?Angular：如何将应用程序状态放在路由参数（url）上？
【发布时间】：2022-10-24 09:11:54
【问题描述】：

我们如何将“http://localhost:4200/#/{"page":"product", "shoe":"47372", "isOpen":false}" 放在 url 上，这样当用户分享链接时，另一端可以使用它来构建状态使用 angular spa 和 ngrx

编辑一，

问题不是如何解析参数，而是如何放入活动路由的参数。

【问题讨论】：

您可以将值设置为查询参数。由于没有显示您尝试过的内容，您可能会被否决。看起来您正在尝试共享显然不起作用的 localhost 链接。您可以通过修改位置或导航设置查询参数来设置它，并通过使用激活路由检索并获取查询参数。

【解决方案1】：

你应该使用参数

就像 http://localhost:4200/#/?page=product&shoe=47372&isOpen=false

并使用this.router.params 获取参数

this.router.params.subscribe(params => {
      this.page = params['page'];
      // ....
    });

【讨论】：

【解决方案2】：

首先，提供一个快速建议，以确保您在这里尝试解决的问题是您应该解决的问题。

尽可能将状态与路径分离通常是好的。在大多数情况下，我认为“状态”是记录页面内的一组交互（例如，用户所做的事情后已经在鞋子 #47372 产品页面上）。

因此，您可能更愿意围绕路由而不是路由参数进行组织。

不过，isOpen 应该做的任何事情都可能最适合作为查询参数，RouterLink 可以做到！

也就是说，Angular 的RouterLink directive 为参数化我们的路线提供了多种选项。使用queryParams 添加查询参数可能是最简单的：

<a routerLink="/my/path" [queryParams]="{ foo: 'bar', foo2: 'bar2' }">My Router Link</a>

生成具有此路径的路由器链接：/my/path?foo=bar&foo2=bar2。

但是如果你想以不同的方式组织你的路由层次结构，你可以将一个数组传递给routerLink：

<a [routerLink]="['my', 'path', myParam]">My Router Link</a>

你的组件有一个公共成员myParam（假设它设置为"foo"）。这将产生一个具有以下路径的路由器链接：/my/path/foo（b/c myParam 的值是“foo”）。

【讨论】：