JavaScript | Angular：带有 Octothorpe 的 UI 路由器 $stateParams 是错误的答案

【问题标题】：JavaScript | Angular: UI Router $stateParams With Octothorpe Is FalseyJavaScript | Angular：带有 Octothorpe 的 UI 路由器 $stateParams 是错误的
【发布时间】：2017-09-08 23:14:51
【问题描述】：

问题

我有一个如下所示的抽象路由：#/app/lists/:label。

当用户创建'Breakfasts' 的“标签”时，这非常棒。

但是，当label 的值为'#All' 时，则为$stateParams.label === ""。

问题

如何让 Angular/-ui-router 确认 #/app/lists/#All 的文字 URL 中的 octothorpe（哈希符号）？ ($stateParams.label)

允许用户添加 octothorpe，例如 #All 或 #Public，是我想为用户保留的必要约定。当这个角色出现时，我该怎么做才能得到这个“标签”？

【问题讨论】：

# 是 URL 中的控制字符，它不能用作参数的一部分，就像 /、:、& 或 ? .
也许是 Angular/UI-Router 中的一个控制字符。但是window.location.hash 将其作为字符串值的一部分提供；尽管它也为您提供了领先的#——但有趣的是，Angular 没有为您提供"".split('#') 值，例如"All"。它真的只是炸毁了这个 $stateParams 属性。

标签： javascript angularjs angular-ui-router hashtag routeparams

【解决方案1】：

您可以对该参数进行编码和解码以放置一个“#”。

同时路由到值为“#All”的页面#/app/lists/:label

encodeURIComponent('#All');

这将返回"%23All"

在读取数据时，您需要在代码中对其进行解码：

decodeURIComponent("%23All");

【讨论】：

对。但这意味着我需要在本地或全局控制器上使用.safeURL() 方法，并在<a> 的href 中替换其return。这……烦人。让我这样说吧：我是在寻求一种解决方案，这样我就可以回避架构问题，实际上是为了避免 ChangeCost。它开始看起来像我需要抽象 "#{{label}}" 值，以便我可以在单个位置（使用）换出 #，然后可能编写一个过滤器/管道以美观地为用户显示它为 # .
好吧，我尝试向 state 添加一个参数，并且该值在启动时有一个 '#' 并且它自动运行良好。我的意思是在使用 $stateParams 读取代码时，url 被编码为“%23”并被解码为“#”

【解决方案2】：

我仍然是角度的菜鸟。刚看到这个问题很好奇，发现了类似的东西——Hashbang Mode。

https://docs.angularjs.org/guide/$location

Hashbang mode simplified.

虽然我不确定这是否会对您的情况有所帮助。

【讨论】：

@Samsull，非常感谢您的建议，但这似乎没有帮助。我开始认为没有解决方案，只能使用不同的字符 - 或向 angular/-ui-router 发送拉取请求，并为其 RegEx 提供一个 mod。谢谢！