如何使用 ui-router 从 URL 解析状态？

Question

如果我有这样的事情：

{ui-sref="tab({tabid:3})"}

单击具有上述属性的元素将触发带有类似 /tab/:tabid 的 URL 的状态。

例如，http://..../tab/3

现在我的问题：

我有一个使用 angular-material 实现的选项卡列表。参考这个plunk

当我点击Tab1 时，状态为/tab/1。当我单击Tab2 时，状态为/tab/2。所有这些状态变化都是通过点击发生的。但是现在如果我手动更改 URL，比如我在地址栏中输入http://..../tab/3，我希望发生相应的状态更改并且应该激活Tab3。目前，假设我在 Tab3 上，并且我手动将 URL 更改为“..../tab/2”，它不会激活 Tab2，尽管状态已更改。

有没有一种通过考虑状态参数来从 URL 解析状态的简单方法？

Answer 1

这里主要关注的是标签的使用。第一个选项卡属于一个状态，其余选项卡属于另一个状态，每个选项卡由一个 ID 唯一标识，该 ID 可通过 state 参数获得。因此，尽管当我手动更改 URL 时解决了正确的状态，但正确的选项卡并未处于活动状态。最简单的解决方法是使用$stateParams读入state参数并设置angular-material的md-selected属性以激活相应的选项卡。