Дополнительные параметры UL-маршрутизатора AngularJS

Я попытался настроить свою маршрутизацию следующим образом

...
url: '/view/:inboxId?'
...

но Angular выбрасывает эту ошибку:

Error: Invalid parameter name '' in pattern '/view/:inboxId?'

так что в основном мне приходилось настраивать два разных состояния:

state('view', {
            url: '/view/:inboxId',
            templateUrl: 'templates/view.html',
            controller: 'viewCtrl'
        }).

        state('view_root', {
            url: '/view',
            templateUrl: 'templates/view.html',
            controller: 'viewCtrl'
        })

Есть ли способ объединить эти состояния в один?

Ответы

Ответ 1

Чтобы иметь необязательный параметр - объявите его так же, как и вы, но не передавайте его. Вот пример . То, что все могли работать с одним состоянием (без корня) или двумя (корень и детализация), как вам нравится.

Определение, упомянутое в вопросе, готово к обработке этих состояний:

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

Нам не нужно использовать ?, чтобы отметить параметр как необязательный. Просто оба url должны быть уникальными (например, /view/:id vs /view - где второй не имеет конца /)

Ответ 2

В приведенном ниже коде можно указать поистине необязательные параметры, если вы не возражаете иметь несколько дополнительных состояний.

Я превратил свое исходное состояние в абстрактное, добавив абстрактный атрибут, а затем создал два дочерних состояния, один с URL-адресом, который имеет параметры, один с пустым URL-адресом, который ссылается на родителя.

Он хорошо работает на моем сайте-разработчике и не требует завершающего косая черта, на самом деле, если вам нужна конечная косая черта, вам нужно будет добавить состояние/когда для него.

  .state('myState.search', {
    url:'/search',
    templateUrl: urlRoot + 'components/search/search.view.html',
    controller: 'searchCtrl',
    controllerAs: 'search',
    abstract: true,
  })
  .state('myState.search.withParams', {
    url:'/:type/:field/:operator/:value',
    controller: 'searchCtrl',//copy controller so $stateParams receives the params
    controllerAs: 'search'
  })
  .state('myState.search.noParams', {
    url:''
  });