Question

我正在使用Angular和ui-router。我试图重构一些看起来像这样的代码：

window.location.hash = "order/" + vm.selectedRow.ID;

到此：

$state.go("^.order", {orderId: vm.selectedRow.ID} )

更改为使用$ state.go处理导航到路由就好了，但是，它会在URL更新之前到达。在关联控制器的构造函数中，我从当前url的末尾获取orderId并在查询中使用它。我正在使用此代码：

var strings = window.location.href.split('/');
return strings[strings.length - 1];

获取密钥。

我应该： 1.继续设置window.location.hash而不是使用$ state.go， 2.重构使用$ location，因为它允许我到达挂起的URL， 3.将ID值传递给新路由使用的控制器？

Answer 1

如果您使用ui-router，则无需并行使用window.location。 ui-router提供了一个名为$stateParams的服务，您可以将其注入控制器。该服务提供了一个对象，每个url参数都有一个密钥。在您的情况下，$stateParams对象将如下所示：

{ orderId: 2 }

但是，请记住，在控制器中，$stateParams对象将只包含在该状态下注册的参数。所以你不会在其他州注册params。

另一种方法是使用$state.params。您只需将$state注入控制器即可。这里的优点是，您还可以访问查询参数。这是一个小例子：

$stateProvider.state('product', {
  url: 'product/:id/:anotherParam/?queryParam',
  controller: 'MyProductController',
});

$state.params; // Contains id, anotherParam, and also queryParam
$stateParams;  // Only contains id and anotherParam

设置window.location.hash与$ state.go

1 个答案: