带可选参数的不带斜杠的 Angular Url [英] Angular Url without slash with optional parameters

查看:33
本文介绍了带可选参数的不带斜杠的 Angular Url的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

两者都是 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 .

Live Demo Link

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆