Несколько необязательных параметров с угловым ui-router

Question

Я пытаюсь использовать несколько необязательных параметров с помощью ui-router, но он, похоже, не работает. Ниже приведены тесты я сделал:

Единственный параметр ОК

state.url  url called  state param values 

/page/:x  /page/   $stateParams.x == "" 
/page/:x  /page/2  $stateParams.x == "2" 

Один дополнительный параметр OK

/page/:x?  /page/   $stateParams.x == "" 
/page/:x?  /page/2  $stateParams.x == "2" 

Два параметра в порядке (за исключением уродливых двойных косых черт в первом случае, /page и /page/ превращается в /page//. Но поскольку параметры не являются обязательными, это нормально)

/page/:x/:y  /page//  $stateParams.x == "" && $stateParams.y == "" 
/page/:x/:y  /page/2  $stateParams.x == "" && $stateParams.y == "" 
/page/:x/:y  /page/2/  $stateParams.x == "2" && $stateParams.y == "" 
/page/:x/:y  /page/2/3  $stateParams.x == "2" && $stateParams.y == "3" 

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

/page/:x?/:y? /page/   $stateParams.x == "" && $stateParams.y == undefined 
/page/:x?/:y? /page/2  $stateParams.x == "2" && $stateParams.y == undefined 
/page/:x?/:y? /page/2/  $stateParams.x == "" && $stateParams.y == undefined 
/page/:x?/:y? /page/2/3  $stateParams.x == "" && $stateParams.y == undefined 

Answer 1

Необязательный параметр UI-Router не указывается путем изменения URL-адреса. Скорее, они определяются с использованием объекта params в определении состояния.

В заявке url: '/page/:x?/:y?' не указаны x и y в качестве дополнительных параметров. Вместо этого знак вопроса используется для разделения URL-адреса и параметра Параметр запроса URL-адреса.

Прочитайте текст описания в UrlMatcher документах и ​​$stateProvider.state документов для url, то для params.

Вы будете в конечном итоге с дополнительными Params сконфигурированных следующим образом:

$stateProvider.state('page', { 
    url: '/page/:x/:y', 
    params: { 
    x: 5, // default value of x is 5 
    y: 100 // default value of y is 100 
    } 
})