使用$stateParams, UI-router从URL获取参数.未定义的值

Get params from URL using $stateParams, UI-router. Undefined Value

本文关键字：参数 获取 未定义 URL stateParams UI-router 使用      更新时间：2023-09-26

我正在使用UI-Router将值从一个状态传递到另一个状态。在我的控制器中，当url更新时，我试图使用$stateParams访问url的第二个参数，但由于某种原因，我可以访问第一个参数，但第二个参数是UNDEFINED。这是我的代码:

状态1,URL:

 http://localhost:16009/#/5nqeAPqlv21/

状态2,URL:

 http://localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR

candidateContoller.js: 

//go to state 2 (same controller for parent and child views)
$state.go('index.details', { "submissionIdd": publicSubmissionId });
//when located in the new state and new url:
console.log($stateParams.submissionIdd); //shows undefined 
console.log($stateParams.token);  //shows 5nqeAPqlv21

App.js: 

$stateProvider       
    .state('index',
        {
            url: '/:token/',
            views: {
                '': {
                    templateUrl: 'AngularJS/Templates/indexView.html',
                    controller: 'candidateController as candCtrl'
                },
                'sectioncandidate@index': {
                    templateUrl: (_isNotMobile) 
                      ? 'AngularJS/Templates/candidatesView.html' 
                      : 'AngularJS/Templates/candidatesMobileView.html'
                }
            }
        })          
     .state('index.details', {
         url: 'details/{submissionIdd}',
         views: {
             'sectioncandidate@index': {
                 templateUrl: (_isNotMobile) 
                   ? 'AngularJS/Templates/candidateView.html' 
                   : 'AngularJS/Templates/candidateMobileView.html'
             }
         }
     })

你确实体验到了UI-Router和Parent/Child状态定义的标准行为:

  • 父状态声明$stateParams(作为url: '/:token/') -所以只有一个声明- token
  • 子状态从父(s)获得所有，加上声明新的参数(作为 url: 'details/{submissionIdd}' ) -所以它已经定义了- token 和 submissionIdd ，
因此，虽然子状态可以访问这两个参数，但父状态只有一个令牌参数

state 1 === PARENT, URL:

http://localhost:16009/#/5nqeAPqlv21/

这里是submissionIdd undefined

state 2 === CHILD, URL:

http://localhost:16009/#/5nqeAPqlv21/details/PP163Ku3dOR

都有submissionIdd=PP163Ku3dOR和token=5nqeAPqlv21

扩展-有一个工作柱塞

此状态定义(在柱塞位调整)

.state('index',
    {
        url: '/:token/',
        views: {
            '': {
                templateUrl: 'indexView.html',
                controller: 'candidateController as candCtrl'
            },
            'sectioncandidate@index': {
                templateUrl: 'parent.html'
            }
        }
    })          
 .state('index.details', {
     url: 'details/{submissionIdd}',
     views: {
         'sectioncandidate@index': {
             templateUrl:'child.html',
         }
    })

将正确显示这些链接的状态参数

href
<a href="#/5nqeAPqlv21/">
<a href="#/5nqeAPqlv21/details/PP163Ku3dOR">
<a href="#/5nqeAPqlv21/details/other">
ui-sref
<a ui-sref="index({token: '5nqeAPqlv21'})">
<a ui-sref="index.details({token: '5nqeAPqlv21', submissionIdd: 'another'})">

点击这里

你可以选择不传递URL中的参数，除非有明确的要求。我更喜欢在控制器中使用$ statparams来获取数据。为此，您需要在状态to中定义默认参数让它发挥作用。

 $stateProvider .state('index.details', {
         url: 'details',
          params: {
              submissionIdd: 'default',
          },
         views: {
             'sectioncandidate@index': {
                 templateUrl: (_isNotMobile) ? 'AngularJS/Templates/candidateView.html' : 'AngularJS/Templates/candidateMobileView.html' ,
             controller: function($stateParams){
                      console.log($stateParams.submissionIdd)
                   }
             }
         }
     })
相关文章：