带可选参数的不带斜杠的 Angular Url [英] Angular Url without slash with optional parameters
问题描述
两者都是 ui-router 可选参数,不带斜杠和 如何定义可选参数使用 UI-Router 也没有尾部斜杠? 没有足够的参数和无效(至少对于我的场景,即没有尾部斜杠的角度路由的工作链接(href))答案.
这里是示例 html 链接
<a ui-sref="home">家</a>|<a href="#/posting/">帖子 1</a>|<a href="#/posting">帖子 2</a>|<a href="#/posting/sami">帖子 3</a>|<a ui-sref="post">帖子 4</a>|<a ui-sref="post({nam:'sami'})">帖子 5</a>
除了帖子 2 之外,上述所有链接都可以正常工作,因为我有一个可选参数,因此链接末尾至少需要一个斜杠
我正在使用 stateprovider
并且 state
看起来像
name: 'post',价值:{url : '/posting/:nam',意见:{v1:{模板:'<h4>发布<label ng-if="stateParams.nam">{{stateParams.nam}}</label>',控制器:'发布',解决: {依赖:函数($ocLazyLoad){return $ocLazyLoad.load([{ name: appName, files: ['post.js'] }]);}}},参数:{名称:{壁球:真,值:空}}}}
如果我只能选择使用链接 href
而不是 ui-sref
如果你像我一样尝试过 @egor.xyz 解决方案,但没有奏效.检查 ui-router 常见问题,你会发现以下内容:
<块引用>对于旧版本的 ui-router,将此代码段添加到模块的配置函数中.它在 $urlRouterProvider 上创建一个规则,将所有缺少尾部斜杠的 url 映射到相同的 url,但附加了尾部斜杠.
$urlRouterProvider.rule(function ($injector, $location) {var path = $location.url();//检查路径是否已经在它应该出现的地方有一个斜线if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {返回;}如果 (path.indexOf('?') > -1) {return path.replace('?', '/?');}返回路径 + '/';});
为我工作.
Both ui-router optional param without trailing slash and How to define optional parameter using UI-Router without trailing slash as well? have insufficient arguments and invalid (at least for my scenario i.e. working links (href) for angular routes without trailing slashes) answers .
Here are the example html links
<div>
<a ui-sref="home">Home</a>
| <a href="#/posting/">Post 1</a>
| <a href="#/posting">Post 2</a>
| <a href="#/posting/sami">Post 3</a>
| <a ui-sref="post">Post 4</a>
| <a ui-sref="post({nam:'sami'})">Post 5</a>
</div>
All of the above links are working fine except Post 2 because I have an optional parameter and so the link needs at least a slash at the end
I am using stateprovider
and a state
looks like
name: 'post',
val: {
url : '/posting/:nam',
views: {
v1: {
template: '<h4>Posting <label ng-if="stateParams.nam">{{stateParams.nam}}</label> </h4>',
controller: 'post',
resolve: {
deps: function ($ocLazyLoad) {
return $ocLazyLoad.load([{ name: appName, files: ['post.js'] }]);
}
}
},
params: {
nam: { squash: true, value: null }
}
}
}
How can i have a valid link without trailing slash if I have only option to use links href
and not the ui-sref
In case you like me tried @egor.xyz solution, and it didn't work. check the ui-router Frequent Questions, and you will find the following:
For older version of ui-router, add this snippet to your module's config function. It creates a rule on $urlRouterProvider that maps all urls that are missing a trailing slash to the same url but with the trailing slash appended.
$urlRouterProvider.rule(function ($injector, $location) {
var path = $location.url();
// check to see if the path already has a slash where it should be
if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
return;
}
if (path.indexOf('?') > -1) {
return path.replace('?', '/?');
}
return path + '/';
});
Worked for me.
这篇关于带可选参数的不带斜杠的 Angular Url的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!