AngularJS 路由,在显示 slug 时使用 ui-sref 传递 id 而不是 url 中的 id
AngularJS routing, pass id with ui-sref while displaying a slug and not the id in the url
我将概述我已经设置的内容以及我想要工作的内容:
我的模板中有这样一个项目列表:
<ul>
<li ng-repeat="user in users">
<a ui-sref="user({slug: user.slug, id: user.id})">
{{user.name}}
</a>
</li>
</ul>
我有一个像这样的状态提供者:
.state('user', {
url: '/:slug',
controller: 'UserCtrl',
templateUrl: 'app/user/userProfile.html',
resolve: {
user: function($stateParams, UserService) {
return UserService.get($stateParams.id);
}
}
});
现在我明白这不起作用,因为 id
参数没有在 url
中定义,所以它没有传递给 $stateParams
。我已经看到类似的问题回答了使用这样的建议:
resolve: {
user: function($stateParams, UserService) {
var userId = UserService.getIdFromSlug($stateParams.slug);
return UserService.get(userId);
}
}
但是 getIdFromSlug
方法要么需要另一个 API 调用,要么当我获得列表时,在服务中创建一个映射对象,如 { slug: id }
。两者似乎都不是非常优雅的解决方案,尤其是因为我已经有了 id
.
我错过了什么吗?没有其他方法可以将参数传递给状态提供者吗? (我是 Angular 的新手)。
.state('user', {
url: '/:slug',
params: { id: { value: -1 } },
我已经使用了上面的方法,所以在 url 中没有传递 ID。
您可以同时传递 slug 和 id ,但是您必须在 url
中同时进行编码
url: '/:slug/:id'
像这样你可以同时通过
您可以在url中添加id
喜欢
url: '/:slug/:id'
或者将其视为如下查询字符串
url: '/:slug&id
我将概述我已经设置的内容以及我想要工作的内容:
我的模板中有这样一个项目列表:
<ul>
<li ng-repeat="user in users">
<a ui-sref="user({slug: user.slug, id: user.id})">
{{user.name}}
</a>
</li>
</ul>
我有一个像这样的状态提供者:
.state('user', {
url: '/:slug',
controller: 'UserCtrl',
templateUrl: 'app/user/userProfile.html',
resolve: {
user: function($stateParams, UserService) {
return UserService.get($stateParams.id);
}
}
});
现在我明白这不起作用,因为 id
参数没有在 url
中定义,所以它没有传递给 $stateParams
。我已经看到类似的问题回答了使用这样的建议:
resolve: {
user: function($stateParams, UserService) {
var userId = UserService.getIdFromSlug($stateParams.slug);
return UserService.get(userId);
}
}
但是 getIdFromSlug
方法要么需要另一个 API 调用,要么当我获得列表时,在服务中创建一个映射对象,如 { slug: id }
。两者似乎都不是非常优雅的解决方案,尤其是因为我已经有了 id
.
我错过了什么吗?没有其他方法可以将参数传递给状态提供者吗? (我是 Angular 的新手)。
.state('user', {
url: '/:slug',
params: { id: { value: -1 } },
我已经使用了上面的方法,所以在 url 中没有传递 ID。
您可以同时传递 slug 和 id ,但是您必须在 url
中同时进行编码url: '/:slug/:id'
像这样你可以同时通过
您可以在url中添加id
喜欢
url: '/:slug/:id'
或者将其视为如下查询字符串
url: '/:slug&id