Несколько необязательных параметров с помощью angular ui-router
Я пытаюсь использовать несколько необязательных параметров с помощью ui-router, но он не работает. Ниже приведены тесты, которые я сделал:
Единственный параметр в порядке
state.url url called state param values
/page/:x /page/ $stateParams.x == ""
/page/:x /page/2 $stateParams.x == "2"
Один необязательный параметр в порядке
/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"
Два необязательных параметра ведут себя странно. Второй параметр всегда undefined, и он не может решить первый параметр, когда я укажу второй.
/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
Ответы
Ответ 1
Необязательный параметр UI-Router не задается путем изменения URL-адреса. Скорее, они определяются с использованием объекта params в определении состояния.
Объявление url: '/page/:x?/:y?' не указывает x и y в качестве необязательных параметров. Вместо этого знак вопроса используется для разделения URL-адреса и параметра Параметр запроса URL-адреса.
Прочитайте текст описания в UrlMatcher docs и $stateProvider.state docs для url, затем для 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
}
})
