Question

与this question和this issue类似，我尝试使用网址查询参数来定义子路由器的子状态：

.state('map', {
  url: '/map?country&city'
  templateUrl: 'templates/myMapTemplate.html',
    // no resolve in this case as using default data for map template
})
.state('map.country', {
  url: '?country',
  templateUrl: 'templates/myMapTemplate.html',
  resolve: {
    countryData : ['mapServices', '$stateParams', function(mapServices, $stateParams){
      return mapServices.getCountryBounds($stateParams.country)    // ajax server call
    }]
  }
})
.state('map.city', {
  url: '?city',
  templateUrl: 'templates/myMapTemplate.html',
  resolve: {
    cityData : ['mapServices', '$stateParams', function(mapServices, $stateParams){
      return mapServices.getCityBounds($stateParams.city)    // ajax server call
    }]
  }
})

这个想法是：
- 具有不同的查询参数（或根本没有）改变状态
- 可以指定每个子状态的resolve:以从服务器获取不同的信息
- 每个州的模板都是相同的，但每个子州（通过解决方案检索）提供给控制器/模板的数据（最终）是不同的

例如。
www.mysite.com/map使用默认数据加载地图
www.mysite.com/map?country=US从服务器获取国家/地区数据 www.mysite.com/map?city=sao_paulo从服务器获取城市数据

我试图像上面那样设置它，但它不会起作用：
- 在子状态中添加URL参数时，未识别子状态

是否可以使用（可选）查询参数来更改ui-router中的子状态？

（docs没有详细说明查询参数）

更新＃1 ：创建了上述代码的plunker 更新＃2 ：创建第二个plunker定义/map作为抽象状态 - 现在可以使用ui-sref更改状态（并将参数注入{{1} }） - 但是href resolve仍然无法识别......？

angular ui-router：使用URL查询参数定义子状态

0 个答案: