Question

如何将以下两个视图一起编写为一个 - 两个视图共享相同的templateurl，相同的url，相同的$stateProvider.state('user-view', { params: { selectedTab: 0 }, templateUrl: './resources/user-view.html', url: '/user-view/:userId', controller: 'useriewCtrl', resolve: { user: ['userService', '$stateParams', function (userService, $stateParams) { return renewalService.getUser($stateParams.userId); }], selectedTab: ['$stateParams', function ($stateParams) { if ($stateParams.selectedTab != null) { return $stateParams.selectedTab; } return 0; }] } }); $stateProvider.state('user-view', { params: { selectedTab: 0 }, templateUrl: './resources/user-view.html', url: '/user-view/:dataeofbirth/:address', controller: 'useriewCtrl', resolve: { user: ['userService', '$stateParams', function (userService, $stateParams) { return renewalService.getUser($stateParams.dataeofbirth, $stateParams.address); }], selectedTab: ['$stateParams', function ($stateParams) { if ($stateParams.selectedTab != null) { return $stateParams.selectedTab; } return 0; }] } });具有不同的参数？

cart

Answer 1

你可以将params作为查询字符串的一部分而不是url的一部分，你需要这样做，因为ui-router需要密钥来知道什么是userId以及什么是dob和地址。

$stateProvider.state('user-view', {
  params: {
    selectedTab: 0
  },
  templateUrl: './resources/user-view.html',
  url: '/user-view?userId&dataeofbirth&address',
  controller: 'useriewCtrl',
  resolve: {
    user: ['userService', '$stateParams', function (userService,
      $stateParams) {
        if($stateParams.userId)
            return renewalService.getUser($stateParams.userId);
        else
            return renewalService.getUser($stateParams.dataeofbirth, $stateParams.address);
    }],
    selectedTab: ['$stateParams', function ($stateParams) {
      if ($stateParams.selectedTab != null) {
        return $stateParams.selectedTab;
      }
      return 0;
    }]
  }
});

演示：http://plnkr.co/edit/ZAIWpuFHxclY9hfpfhQC?p=preview

Answer 2

状态url使您能够提供可选字段。

所以你可以合并：

'/user-view/:userId'
'/user-view?userId&dataeofbirth&address'

类似于：

url: '/user-view/:userId?/:dataeofbirth?/:address?'

然而，这种方法的主要缺点是$state不知道如何填充3个可选参数。

所以如果我们写的话：

/user-view/userId12 - 确定
/user-view/dataeofbirth3/address4 - 我们将在此处获取：

userId = dataeofbirth3和dataeofbirth = address4

Demo that demonstrates the problem in Plunker

所以我们可以写：

url: '/user-view/:arg1?/:arg2?/:arg3?'

或使用squash：

 url: '/user-view/:arg1/:arg2/:arg3',
 params: {
           arg1:       {squash: true, value: null},
           arg2: {squash: true, value: null},
           arg3:      {squash: true, value: null}
         }

$stateProvider.state('user-view', {
  params: {
    selectedTab: 0
  },
  templateUrl: './resources/user-view.html',
  url: '/user-view/:userId?/:dataeofbirth?/:address?'
  controller: 'useriewCtrl',
  resolve: {
    user: ['userService', '$stateParams', function (userService,
      $stateParams) {

      if($stateParams.arg1 && !$stateParams.arg2){// we have only userId
         return renewalService.getUser($stateParams.arg1);
       }
      else if ($stateParams.arg1  && $stateParams.arg2){
          renewalService.getUser($stateParams.arg1,
    $stateParams.arg2);
      }
       else{
         // other fallback
       }          
    }],
    selectedTab: /* ... */
  }
});

Angular JS对两个两个URL使用一个视图

2 个答案: