在我的 Angular 应用程序中,我有以下路由结构:
.state('mapping', {
url: '/mapping',
templateUrl: 'app/components/mapping/mapping.html',
controller: 'MapCtrl as map',
abstract: true,
authenticate: true
})
.state('mapping.all', {
url: '',
templateUrl: 'app/components/mapping/partials/all.html',
authenticate: true
})
.state('mapping.project', {
url: '/:projectName',
controller: 'ProjectCtrl as proj',
templateUrl: 'app/components/mapping/partials/project.html',
authenticate: true
})
预期的功能是,当用户访问'mapping.project'
时,应用程序将使用传递的projectID
变量加载与该项目相关的所有相关信息(使用 ui-sref
通过 $stateParams
隐形):
ui-sref="mapping.project({projectId: project.id, projectName: project.name})"
但是,这会导致不良行为:当用户在已处于 'mapping.project'
状态时重新加载页面时,不会加载任何内容,因为没有 $stateParams
已有效通过。
在重新加载时获取 projectId
(并确保我的 Controller 再次启动)而不将其显示在 URL 上的最佳方法是什么?
最佳答案
在这种情况下,如果我们希望参数在页面重新加载(或在新选项卡/窗口中打开)后仍然存在,它们必须是 URL 的一部分。因此,执行此操作的方法是使用 projectId
扩展 URL 定义:
.state('mapping.project', {
url: '/:projectName?projectId',
...
})
这会将 projectId
添加为“查询字符串参数”。另一种选择是params嵌套
.state('mapping.project', {
url: '/:projectName/:projectId',
...
})
另请检查:How to pass parameters using ui-sref in ui-router to controller
关于javascript - Angular ui 路由器 : accessing $stateParams on reload,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33064608/