如何使用 Angularjs ui-router 和组件传递不在 URL 中的参数？

Question

我不知道如何使用 angularjs ui-router 传递参数，因为 $stateParams 已经 depricated in ui-router 1.x. The ui-router documentation shows an example 通过 [=34] 传递参数=]，但没有传递未包含在 URL.

中的参数的示例

{
  name: 'person',
  url: '/people/{personId}',
  component: 'person',
  resolve: {
    person: function(PeopleService, $transition$) {
      return PeopleService.getPerson($transition$.params().personId);
    }
  }
}

这曾经是 possible 使用 $stateParams 通过将参数对象添加到状态对象。

.state('contacts', {
        url: "/contacts",
        params: {
            param1: null
        },
        templateUrl: 'contacts.html'
    })

但是，此请求uires 现已弃用 $stateParams。

我试过混合使用这 2 种方法，但我没能成功。

{
  name: 'person',
  url: '/people/',
  component: 'person',
  params:{
    personId:null
  }
  resolve: {
    person: function(PeopleService, $transition$) {
      return PeopleService.getPerson($transition$.params().personId);
    }
  }
}

此功能是否已从 ui-路由器中移除？有没有更好的方法来传递参数，尤其是对象，而不会使 URLs 变得荒谬？

Answer 1

我发现参数是通过 $transition$ 对象传递的。但是，此对象不会像常规提供程序那样传递给控制器。您通过组件上的绑定传递 $transition$ 对象。 $transition$ 按照 here.

的解释自动绑定

ui-路由器配置：

.state({
        name: "contacts",
        url: "/contacts",
        params: {
            param1: null
        },
        component: "contacts"
    })

控制器：

module.component("contacts", {
    bindings: { 
        $transition$: '<'
    },
    controller: {
        var $ctrl = this;

        $ctrl.$onInit = function(){
            var param1 = $ctrl.$transition$.params().param1;
        };
    }
}

HTML Link

<a ui-sref="contacts({param1:$ctrl.myParam})" ui-sref-active="active">Contacts</a>

有关使用 $transition$ 和 $transition$.params() 的更多信息，请访问 ui-router's Github page。

如何使用 Angularjs ui-router 和组件传递不在 URL 中的参数？

How do I pass a parameter not in the URL using Angularjs ui-router and components?

angularjs

angular-ui-router