如何使用 UI-Router 定义可选参数而没有尾部斜杠? [英] How to define optional parameter using UI-Router without trailing slash as well?

问题描述

我正在将我的 Angularjs 代码从 ng-router 迁移到 UI-Router.在我的 ng-router 中，我有可选参数，但是我意识到 ui-router 不支持同样简单的方法来支持可选参数.以下是我现有的 ng-router 模块中的路由.

I was working on migration of my Angularjs code from ng-router to UI-Router. In my ng-router I have optional parameters however I realized that same easy way to support optional parameter is not supported in ui-router. Following is my routes from my existing ng-router module.

//Define routes for view  using ng-router
$routeProvider.
        when('/my-app/home/:userid?', {
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })                   
        .when('/my-app/:productKey/:userid?', {
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        })
        .otherwise({redirectTo: '/my-app/home'});

注意:如果你看到 ":userid" 参数在这里被非常顺利地实现为可选.

Note: If you see ":userid" parameter is very smoothly implemented here as optional.

我尝试在 ui-router 中跟随，但同样不起作用.我已经浏览了很多帖子，并建议复制路线.我真的不想复制，因为它会使代码变脏.

I tried following in ui-router however same is not working. I have gone through many post and it was suggested to duplicate the routes. I really don't want to duplicate as it will make code dirty.

//Set the default route

$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view   (Please make sure the most matched pattern is define at top)
$stateProvider
        .state('viewallcards', {
            url: '/my-app/home/:userid',
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })
        .state('productpage', {
            url: '/my-app/:productKey/:userid',
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        });

此处/my-app/home/有效，但/my-app/home 无效.如何在没有斜杠的情况下制作它?

Here /my-app/home/ works however /my-app/home doesn't work. How to make it without trailing slash as well?

关于同一问题的后续帖子也让我惊讶地发现 ui-router 不支持此功能.它仍然有效吗?请帮忙.

Also following post on same issue has surprised to me to know that this is not supported in ui-router. Is it still valid? Please help.

推荐答案

有 一个工作示例

我们可以使用 params : {} 对象来定义 userid 完全符合我们的需要(即准备好省略).

We can use params : {} object to define the userid exactly as we need (i.e. ready to be omitted).

在此处查看有关 params 的更多详细信息:

Check more details about params here:

  $stateProvider
    .state('viewallcards', {
      url: '/my-app/home/:userid',
      params: { 
        userid: {squash: true, value: null }, // this will make both links below working:
        //         #/my-app/home
        //         #/my-app/home/
      },
      ...
    })
    .state('productpage', {
      url: '/my-app/:productKey/:userid',
      ...
    })

检查它在此操作

这篇关于如何使用 UI-Router 定义可选参数而没有尾部斜杠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！